Question

我使用Style来自定义我的组件：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <StackPanel.Resources>
          <Style TargetType="Button">
            <Setter Property="Height" Value="80"/>
            <Setter Property="Width" Value="80"/>
            <Setter Property="Margin" Value="10"/>
          </Style>
        </StackPanel.Resources>

        <Button Content="Listas"/>
        <Button Content="Filas"/>
        <Button Content="Pilhas"/>
    </StackPanel>

    <VisualStateManager.VisualStateGroups>
       <VisualStateGroup x:Name="VisualStateGroup">
          <VisualState x:Name="VisualStatePhone">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="VisualStateTablet">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="600"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="Button.Width" Value="100"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="VisualStateDesktop">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="800"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="Button.Width" Value="200"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
  </VisualStateManager.VisualStateGroups>
</Grid>

但我不知道如何使用VisualStateManager更改样式。我想在Buttons，TextBlocks等目标上应用样式，然后更改样式的属性。

Answer 1

我不知道你能达到按钮样式的任何方式并改变它。但是，如果您愿意为按钮创建完整的模板，则可以在模板中添加VisualStateGroups：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <StackPanel.Resources>
            <Style TargetType="Button">
                <Setter Property="Height" Value="80"/>
                <Setter Property="Margin" Value="10"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid x:Name="buttonGrid" Width="80">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="VisualStateGroup">
                                        <VisualState x:Name="VisualStatePhone">
                                            <VisualState.StateTriggers>
                                                <AdaptiveTrigger MinWindowWidth="0"/>
                                            </VisualState.StateTriggers>
                                        </VisualState>
                                        <VisualState x:Name="VisualStateDesktop">
                                            <VisualState.StateTriggers>
                                                <AdaptiveTrigger MinWindowWidth="800"/>
                                            </VisualState.StateTriggers>
                                            <VisualState.Setters>
                                                <Setter
                                                    Target="buttonGrid.Width"
                                                    Value="200" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border BorderThickness="2" BorderBrush="Blue">
                                    <ContentPresenter
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                    />
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </StackPanel.Resources>

        <Button Content="Listas" />
        <Button Content="Filas" />
        <Button Content="Pilhas" />
    </StackPanel>
</Grid>

这只是我制作的一个简单丑陋的模板;你想要从default button template开始。

UWP XAML使用VisualStateManager

1 个答案: