调整内容到屏幕大小(UWP应用程序)

时间:2017-03-22 16:42:18

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

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

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

1 个答案:

答案 0 :(得分:0)

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

自适应将是我的选择,只需使用setter进行控制。给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放在该文件夹中