【问题标题】:How to disable scaling for UWP apps如何禁用 UWP 应用的缩放
【发布时间】:2020-01-21 07:11:15
【问题描述】:

我正在设计 uwp 应用程序。我的电脑分辨率是 1920 x 1080,100% 比例。所有元素布局正常。 但是,当在 1920 x 1080、125% 比例的屏幕上运行应用程序时,元素不在正确的位置,所有元素都大了 1.25 倍。

那么如何在所有分辨率下禁用缩放,或者有什么解决方案?

【问题讨论】:

  • 您需要通过将每个控件的水平和垂直属性设置为拉伸来以响应方式设计每个屏幕,这是它的唯一解决方案link 请参阅链接了解更多详细信息。您必须设计您的 UI 响应式。
  • 如果用户的屏幕是 1920x1080,100% 比例,应用显示正常。如果他变成 200% 规模会发生什么?我认为低于 200% 是一团糟,因为所有利润都扩大了。如何处理?我知道一种方法是使用 Grid 行和列,但它们没有按设计将我的元素布置在正确的位置。
  • 假设您在左侧有一个按钮,并且您希望此按钮在相同分辨率下看起来相同,然后从网格行和列定义中删除 *,然后查看所有分辨率的输出。
  • 这感觉就像“我如何禁用用户”。你不能禁用用户,用户已经要求操作系统有更大的控制(可能他有视力问题),满足用户期望并保持应用运行是你的。
  • 你试过我的解决方案了吗??

标签: xaml uwp uwp-xaml


【解决方案1】:

我给你一个简单的例子,我展示了两个按钮和一个网格,你可以在任何分辨率上运行它,左侧和右侧按钮始终保持在相同的位置,网格将相应地改变分辨率大小

   <Grid HorizontalAlignment="Stretch"  Margin="0,0,0,0" VerticalAlignment="Stretch" >
        <Grid.RowDefinitions>
            <RowDefinition Height="150"/>
            <RowDefinition Height="169*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"/>
            <ColumnDefinition Width="113*"/>
            <ColumnDefinition Width="150"/>
        </Grid.ColumnDefinitions>
        <Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,55,10,40" />
        <Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,55,10,40" Grid.Column="2" />
        <Grid Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="Black" BorderThickness="2" Grid.RowSpan="2"/>
    </Gid>

您的代码示例

   <Grid HorizontalAlignment="Stretch"  Margin="0,0,0,0" VerticalAlignment="Stretch" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="945"/>
            <ColumnDefinition Width="945"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="Color"
            Margin="117, 84, 0, 0"
            FontSize="48"/>
        <Button Grid.Row="1" Content="Red" Width="500" Height="80" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" 
                Margin="445 30 0 0"
                />
        <Button Grid.Row="1" Grid.Column="1" Content="Yellow" Width="500" Height="80" 
                Margin="0 30 445 0"
                HorizontalAlignment="Center" VerticalAlignment="Center"/>


        <Grid Grid.Row="2" Grid.ColumnSpan="2"
            Margin="84 40 84 0" HorizontalAlignment="Stretch" 
              VerticalAlignment="Stretch" BorderBrush="Black" BorderThickness="2"/>
    </Grid>

【讨论】:

  • 您好,很抱歉回复晚了,我尝试了您的示例,它有效,因为您没有指定按钮宽度。你可以试试我的代码gist.github.com/hupo376787/cfeb0fad50f20f59bfdd4b34ce42bce4
  • 为什么您希望各个按钮的左右边距为 445 将按钮边距设置为 0 并将水平和垂直对齐设置为 Center 它不会与按钮重叠
  • 作为 ui 设计,按钮必须在 1920x1080 的那个位置。
  • 好的,我试过了。也许我应该说服 ui 重新设计并考虑其中的比例因子?有没有同时包含ui和xaml的开源项目,可以借鉴一下。
  • 对不起,我对开源项目一无所知 :) 我认为 ui 设计师应该为每个分辨率提供设计
猜你喜欢
  • 1970-01-01
  • 2019-10-28
  • 1970-01-01
  • 1970-01-01
  • 2018-04-30
  • 1970-01-01
  • 1970-01-01
  • 2020-11-11
  • 2021-08-19
相关资源
最近更新 更多