画面サイズに応じてスタイルを変更するにはどうすればよいですか？

Question

StackPanelの向きを画面のサイズに応じて変更したいと思います。

私はthis answerをフォローしてきましたが、まだ機能していません。ここで

は、私がこれまで持っているものです：

<VisualStateManager.VisualStateGroups> 
    <VisualStateGroup x:Name="SharedVisualStates"> 
     <VisualState x:Name="DefaultLayout"> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="720" /> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="GuidesList.Style" Value="{StaticResource DefaultGuidesList}" /> 
      </VisualState.Setters> 
     </VisualState> 
     <VisualState x:Name="NarrowLayout"> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="0" /> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="GuidesList.Style" Value="{StaticResource NarrowGuidesList}" /> 
      </VisualState.Setters> 
     </VisualState> 
    </VisualStateGroup> 
</VisualStateManager.VisualStateGroups> 

<Page.Resources> 
    <Style x:Key="DefaultGuidesList" TargetType="StackPanel" > 
     <Setter Property="Orientation" Value="Horizontal"/> 
    </Style> 

    <Style x:Key="NarrowGuidesList" TargetType="StackPanel" > 
     <Setter Property="Orientation" Value="Vertical"/> 
    </Style> 
</Page.Resources> 

<StackPanel 
    x:Name="GuidesList"> 
    <StackPanel ... /> 
    <StackPanel ... /> 
</StackPanel> 

任意のアイデア？

Answer 1

を、あなたは間違った場所にVisualStateManagerを入れています。それを機能させるには、ページのルート要素にVisualStateManager.VisualStateGroupsを追加します。

コントロール作者やアプリケーション開発者は、VisualStateManager.VisualStateGroups添付プロパティを使用して、XAML内の制御テンプレート定義のルート要素にVisualStateGroupオブジェクト要素を追加します。

詳細については、VisualStateManager.VisualStateGroups attached propertyを参照してください。

だから私は、次のようにコードを変更：

<Page x:Class="UWP.MainPage" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:local="using:UWP" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     mc:Ignorable="d"> 
    <Page.Resources> 
     <Style x:Key="DefaultGuidesList" TargetType="StackPanel"> 
      <Setter Property="Orientation" Value="Horizontal" /> 
     </Style> 
     <Style x:Key="NarrowGuidesList" TargetType="StackPanel"> 
      <Setter Property="Orientation" Value="Vertical" /> 
     </Style> 
    </Page.Resources> 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="SharedVisualStates"> 
       <VisualState x:Name="DefaultLayout"> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="720" /> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="GuidesList.Style" Value="{StaticResource DefaultGuidesList}" /> 
        </VisualState.Setters> 
       </VisualState> 
       <VisualState x:Name="NarrowLayout"> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="0" /> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="GuidesList.Style" Value="{StaticResource NarrowGuidesList}" /> 
        </VisualState.Setters> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 

     <StackPanel x:Name="GuidesList"> 
      <StackPanel Width="400" 
         Height="200" 
         Background="Red" /> 
      <StackPanel Width="400" 
         Height="200" 
         Background="Blue" /> 
     </StackPanel> 
    </Grid> 
</Page> 

そして、それはうまく動作します。

Answer 2

また、古い方法で行うこともできます。

<StackPanel x:Name="GuidesList"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState x:Name="HorLayout"> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GuidesList" Storyboard.TargetProperty="Orientation"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="Horizontal"/> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="VertLayout"> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GuidesList" Storyboard.TargetProperty="Orientation"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="Vertical"/> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    ..... 

とページのサイズ変更イベントを処理：
はXAMLで2つの視覚的な状態に追加あなたのコードによると

private void Page_SizeChanged(object sender, SizeChangedEventArgs e) 
    { 
     if (e.NewSize.Width < 700) 
     { 
      VisualStateManager.GoToState(this, "VertLayout", true); 
     } 
     else 
     { 
      VisualStateManager.GoToState(this, "HorLayout", true); 
     } 
    }