如何根据屏幕大小更改样式?

问题描述

我想根据屏幕大小更改 StackPanel 的方向.

我一直在关注

I would like to change the orientation of a StackPanel depending on the screen size.

I've been following this answer but haven't got things working yet.

Here's what I've got so far:

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

Any ideas?

解决方案

According to your code, you've put the VisualStateManager in a wrong place. To mark it work, you can add the VisualStateManager.VisualStateGroups to the root element of your page.

For more info, please see VisualStateManager.VisualStateGroups attached property.

So I changed your code like following:

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

And it works well.

这篇关于如何根据屏幕大小更改样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！