为按钮设置样式，但更改 UWP 应用中的某些属性 [英] Setting a Style for a Button, but changing some properties in UWP app
本文介绍了为按钮设置样式，但更改 UWP 应用中的某些属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想为一个按钮创建一个样式，它旁边有一个图标和一个文本块.
I'd like to create a Style for a Button that has an Icon and a Textblock beside it.
喜欢这里的暂停按钮
所以现在我刚刚在 Button.Content 属性中设置了一个模板
So for now I've just set up a Template inside the Button.Content property
<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 按钮)怎么办?
This works for this button, but I'd like to repeat the template for multiple buttons. What if I have to do another Button, like a STOP button?
如何在更改文本块的 SymbolIcon 和 Text 属性的同时创建样式?
How can I create a Style, while changing the SymbolIcon and the Text property of the Textblock?
推荐答案
您可以使用 AttachedProperty 并覆盖 Default-Style 来实现:
You can achieve that with an AttachedProperty and overriding the Default-Style:
附加属性
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));
}
按钮样式
<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-Enum 没有 None 或默认值.首先，我认为设置任何默认值都可以，但它不会编译.所以不要忘记在你想要的按钮上设置符号.如果有人可以解释或有好的解决方法，请告诉我们！
I find this quite important to know. The Symbol-Enum hasn't a None or Default value. First i thought setting any default-value will do the trick, but it wont compile. So dont forget to set the Symbol on the Buttons you want to. If anyone can explain or has a good workaround, let us know!
干杯！
这篇关于为按钮设置样式，但更改 UWP 应用中的某些属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
