Visual studio 2015 根据屏幕大小调整内容（UWP应用程序）

我正在开发一个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"/>

---

如何更改桌面和移动设备的大小？

您有两种选择，可以使用自适应视图，也可以使用设备族视图

自适应将是我的选择，只是使用setters的控制。给adcontrol一个名称，然后在setters中，您将有如下内容

  <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>

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

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