Question

我想为按钮创建一个Style，旁边有一个Icon和一个Textblock。

像这里的暂停按钮

所以现在我只是在Button.Content属性

中设置了一个模板

<Button>
                    <Button.ContentTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>

                                <SymbolIcon Grid.Column="0" 
                                            Symbol="Pause" />
                                <TextBlock Grid.Column="1"
                                           Text="Pause"/>

                            </Grid>
                        </DataTemplate>
                    </Button.ContentTemplate>
                </Button>

这适用于此按钮，但我想重复多个按钮的模板。如果我必须做另一个Button，比如STOP按钮怎么办？

如何在更改Textblock的SymbolIcon和Text属性时创建样式？

Answer 1

您可以使用AttachedProperty实现该功能并覆盖默认样式：

<强> AttachedProperty

public static class ButtonAttachedProperties {

        public static void SetMySymbol(Button element, Symbol value) {
            element.SetValue(MySymbolProperty, value);
        }

        public static Symbol GetMySymbol(Button element) {
            return (Symbol) element.GetValue(MySymbolProperty);
        }

        // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty MySymbolProperty =
            DependencyProperty.RegisterAttached("MySymbol", typeof(Symbol), typeof(ButtonAttachedProperties), new PropertyMetadata(Symbol.Bullets));

    }

<强>的ButtonStyle

 <Style TargetType="Button" x:Key="DoubleContentStyle">
            <Setter Property="Background" Value="{ThemeResource ButtonBackgroundThemeBrush}" />
            <Setter Property="Foreground" Value="{ThemeResource ButtonForegroundThemeBrush}"/>
            <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderThemeBrush}" />
            <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
            <Setter Property="Padding" Value="12,4,12,4" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontWeight" Value="SemiBold" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                                   Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverForegroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                                   Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                                   Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                                   Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBorderThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="FocusVisualWhite"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1"
                                                     Duration="0" />
                                            <DoubleAnimation Storyboard.TargetName="FocusVisualBlack"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1"
                                                     Duration="0" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused" />
                                    <VisualState x:Name="PointerFocused" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="3">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <SymbolIcon Symbol="{Binding Path=(vm:ButtonAttachedProperties.MySymbol), RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"/>

                                    <ContentPresenter x:Name="ContentPresenter" Grid.Column="1"
                                          Content="{TemplateBinding Content}"
                                          ContentTransitions="{TemplateBinding ContentTransitions}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          Margin="{TemplateBinding Padding}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                          AutomationProperties.AccessibilityView="Raw"/>
                                </Grid>

                            </Border>
                            <Rectangle x:Name="FocusVisualWhite"
                               IsHitTestVisible="False"
                               Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
                               StrokeEndLineCap="Square"
                               StrokeDashArray="1,1"
                               Opacity="0"
                               StrokeDashOffset="1.5" />
                            <Rectangle x:Name="FocusVisualBlack"
                               IsHitTestVisible="False"
                               Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
                               StrokeEndLineCap="Square"
                               StrokeDashArray="1,1"
                               Opacity="0"
                               StrokeDashOffset="0.5" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

<强>用法

 <Button Style="{StaticResource DoubleContentStyle}" Content="Pause" vm:ButtonAttachedProperties.MySymbol="Pause"/>

我的2美分

我发现这一点非常重要。 Symbol - 枚举没有“无”或“默认”值。首先我认为设置任何默认值都可以解决问题，但它不会编译。所以不要忘记在你想要的按钮上设置符号。如果有人可以解释或有一个好的解决方法，请告诉我们！

干杯！

为按钮设置样式，但在UWP应用程序中更改某些属性

1 个答案: