使内容适应屏幕大小（UWP 应用）答案

【问题标题】：Adapt content to screen size (UWP app)使内容适应屏幕大小（UWP 应用）
【发布时间】：2017-08-14 22:21:20
【问题描述】：

我正在开发一个 uwp 应用程序，我正在使用模板 10。我已经完成了这段代码：

<VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="AdaptiveVisualStateGroup">
                <VisualState x:Name="VisualStateNarrow">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource NarrowMinWidth}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <!--  TODO: change properties for narrow view  -->
                        <!--<Setter Target="stateTextBox.Text" Value="Narrow Visual State" />-->
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="VisualStateNormal">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource NormalMinWidth}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <!--  TODO: change properties for normal view  -->
                        <!--<Setter Target="stateTextBox.Text" Value="Normal Visual State" />-->
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="VisualStateWide">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideMinWidth}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <!--  TODO: change properties for wide view  -->
                        <!--<Setter Target="stateTextBox.Text" Value="Wide Visual State" />-->
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

我正在应用中设置当前广告。在桌面上我想：

<UI:AdControl ApplicationId="3f83fe91-d6be-434d-a0ae-7351c5a997f1"
                          AdUnitId="test"
                          RelativePanel.AlignTopWithPanel="True"
                          RelativePanel.AlignHorizontalCenterWithPanel="True"
                          Margin="0,25,0,0"
                          Height="90"
                          Width="728"/>

像这样在移动设备上：

<UI:AdControl ApplicationId="3f83fe91-d6be-434d-a0ae-7351c5a997f1"
                          AdUnitId="test"
                          RelativePanel.AlignTopWithPanel="True"
                          RelativePanel.AlignHorizontalCenterWithPanel="True"
                          Margin="0,25,0,0"
                          Height="50"
                          Width="300"/>

如何更改桌面和移动设备的尺寸？

【问题讨论】：

标签： visual-studio-2015 uwp uwp-xaml template10

【解决方案1】：

您有 2 个选择，您可以使用自适应或使用设备系列视图

自适应将是我的选择，只需使用设置器进行控制。给 adcontrol 一个名字，然后在 setter 中你会得到类似的东西

  <UI:AdControl ApplicationId="GUID" AdUnitId="Test" 
               Name="SomeAdControl" ... />     


  <!-- narrow -->
 <VisualState.Setter>
   <Setter Target="SomeAdControl.Width" Value="300" />
   <Setter Target="SomeAdControl.Height" Value="50" />
 <VisualState.Setter/>

 <!--- Normal -->
 <VisualState.Setter>
   <Setter Target="SomeAdControl.Width" Value="768" />
   <Setter Target="SomeAdControl.Height" Value="90" />
 </VisualState.Setter>

根据触发的VisualTrigger，是同一个控件，维度不同。

第二个选项是设备系列视图，例如，您可以为分离创建文件夹，或者您可以在这种情况下创建特定的视图

  MainPage.DeviceFamily-Mobile.xaml
  MainPage.DeviceFamily-Desktop.xaml
  MainPage.xaml

所有这些都是局部的，具有不同的视图布局。或命名文件夹 DeviceFamily-Mobile 并在该文件夹中放置一个部分类 MainPage.xaml

【讨论】：