按钮样式不影响xaml（uwp）中的路径前景/填充（路径几何） [英] Button styles does not effect the path foreground/fill (path geometry) in xaml (uwp)
本文介绍了按钮样式不影响xaml（uwp）中的路径前景/填充（路径几何）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要使用常用的按钮样式。我使用了矩形和内容展示器来映射属性和按钮内容。
I need to use the common style for buttons. I have used rectangle and content presenter to map the properties with the buttons content.
请找到以下代码。
<Page.Resources>
<Style x:Key="ButtonStyle" TargetType="ButtonBase">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<Grid>
<Rectangle x:Name="fill" Width="50" Height="40" Fill="Transparent" Visibility="Visible" HorizontalAlignment="Center" VerticalAlignment="Center" />
<ContentPresenter x:Name="contentPresenter" Foreground="White" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="fill" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="#333333"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="fill" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="#4a4a4a"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="#696969"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="fill" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="#4a4a4a"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="Gray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Button ToolTipService.ToolTip="Open" Style="{StaticResource ButtonStyle}" x:Name="Open" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" Click="Open_Click" Height="40" Width="50">
<Path x:Name="iconOpen" Data="M1.2500003,2.139 L1.2500003,16.251 3.750001,18.75 3.750001,15.313 C3.750001,15.02 3.7810011,14.768 3.8430012,14.556 3.9050012,14.345 3.9810012,14.156 4.0720012,13.99 4.1640013,13.824 4.2640012,13.676 4.3750015,13.545 4.486001,13.415 4.5860014,13.283 4.6780014,13.15 4.7690015,13.017 4.8450013,12.873 4.9070015,12.72 4.9690013,12.567 5.0000015,12.39 5.0000015,12.188 L5.0000015,5.8889998 z M2.1390007,1.25 L5.8890014,4.9999999 C6.0060015,5.1179999 6.0950017,5.2530001 6.1570015,5.406 6.2190018,5.5589999 6.2500019,5.7200001 6.2500019,5.8889998 L6.2500019,12.188 C6.2500019,12.481 6.2190018,12.733 6.1570015,12.945 6.0950017,13.156 6.0190015,13.345 5.9280014,13.511 5.8360014,13.677 5.7360015,13.825 5.6250015,13.956 5.5140014,14.086 5.4140015,14.218 5.3220015,14.351 5.2310014,14.484 5.1550012,14.628 5.0930014,14.781 5.0310016,14.934 5.0000015,15.111 5.0000015,15.313 L5.0000015,16.251 13.750003,16.251 13.750003,13.438 C13.750003,13.236 13.719003,13.061 13.657004,12.911 13.595004,12.761 13.519003,12.619 13.428004,12.486 13.336004,12.353 13.236003,12.219 13.125003,12.085 13.014003,11.952 12.914003,11.804 12.822003,11.641 12.731003,11.479 12.655003,11.29 12.593004,11.075 12.531004,10.86 12.500003,10.606 12.500003,10.313 L12.500003,1.25 z M0,0 L12.500003,0 C12.669003,0 12.831004,0.032999992 12.983003,0.097999871 13.136003,0.163 13.270004,0.253 13.384003,0.36700011 13.498004,0.48 13.587003,0.61399999 13.652004,0.76700002 13.717003,0.91999999 13.750003,1.081 13.750003,1.25 L13.750003,10.313 C13.750003,10.515 13.781004,10.69 13.843004,10.84 13.905004,10.99 13.981003,11.132 14.072004,11.265 14.164004,11.398 14.264003,11.532 14.375003,11.666 14.486003,11.799 14.586004,11.947 14.678004,12.11 14.769003,12.272 14.845004,12.461 14.907004,12.676 14.969004,12.891 15.000004,13.145 15.000004,13.438 L15.000004,16.251 C15.000004,16.42 14.967004,16.581 14.902004,16.734 14.837004,16.886999 14.748004,17.021 14.634004,17.133999 14.520004,17.248 14.386004,17.338 14.233004,17.403 14.081004,17.468001 13.919004,17.5 13.750003,17.5 L5.0000015,17.5 5.0000015,18.75 C5.0000015,19.004 4.9300013,19.235001 4.7900014,19.444001 4.6500011,19.652001 4.4630013,19.805001 4.2290011,19.903 4.0790012,19.968001 3.9190011,20 3.750001,20 3.405001,20 3.109001,19.876999 2.861001,19.629 L0,16.768 z" Fill="White" HorizontalAlignment="Center" Height="18" Stretch="Fill" VerticalAlignment="Center" Width="13.5"/>
</Button>
<Button ToolTipService.ToolTip="Mode" x:Name="FitWindow" Style="{StaticResource ButtonStyle}" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Click="ViewMode_Click" Height="40" Width="50">
<Path Data="M3.2889943,4.1640059 L3.9609933,4.8360052 3.2969942,5.5000043 6.5019898,5.5000043 6.5019898,6.5000029 3.2969942,6.5000029 3.9609933,7.1640022 3.2889943,7.8360012 1.4449968,6.0000036 z M11.720999,4.1640031 L13.56499,6.0000069 11.720999,7.8360033 11.048987,7.1639993 11.712988,6.5000064 8.5079901,6.5000064 8.5079901,5.5000076 11.712988,5.5000076 11.048987,4.8360068 z M1.0000005,0.99999976 L1.0000005,11 15,11 15,0.99999976 z M0,0 L16,0 16,12 0,12 z" Fill="White" HorizontalAlignment="Center" Height="16.2" Stretch="Fill" VerticalAlignment="Center" Width="18"/>
</Button>
</Grid>要求：
1）定义共同风格按钮。
1) Defining common style for buttons.
2）按钮前景，按钮内容的前景，背景需要根据按钮的状态{已启用，已禁用，鼠标悬停，鼠标移动}进行更改。
2) The button foreground, button content's foreground, background needs to be changes based on the button's state {Enabled, disabled, mouse over, mouse moved}.
注意：当我使用文本块时，这种常见样式按预期工作。但我只有图形路径，我需要具有视觉状态触发器的共同风格。
Note: When i use text block, this common styles work as expected. But i have graphics path alone and i need common style with visual state triggers.
屏幕截图：
请帮我解决问题。
谢谢，
Ayswarya
推荐答案
我需要使用常用的按钮样式。我使用了矩形和内容展示器来使用按钮内容映射属性。
I need to use the common style for buttons. I have used rectangle and content presenter to map the properties with the buttons content.
请找到以下代码。
<Page.Resources>
<Style x:Key="ButtonStyle" TargetType="ButtonBase">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<Grid>
<Rectangle x:Name="fill" Width="50" Height="40" Fill="Transparent" Visibility="Visible" HorizontalAlignment="Center" VerticalAlignment="Center" />
<ContentPresenter x:Name="contentPresenter" Foreground="White" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="fill" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="#333333"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="fill" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="#4a4a4a"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="#696969"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="fill" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="#4a4a4a"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="Gray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Button ToolTipService.ToolTip="Open" Style="{StaticResource ButtonStyle}" x:Name="Open" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" Click="Open_Click" Height="40" Width="50">
<Path x:Name="iconOpen" Data="M1.2500003,2.139 L1.2500003,16.251 3.750001,18.75 3.750001,15.313 C3.750001,15.02 3.7810011,14.768 3.8430012,14.556 3.9050012,14.345 3.9810012,14.156 4.0720012,13.99 4.1640013,13.824 4.2640012,13.676 4.3750015,13.545 4.486001,13.415 4.5860014,13.283 4.6780014,13.15 4.7690015,13.017 4.8450013,12.873 4.9070015,12.72 4.9690013,12.567 5.0000015,12.39 5.0000015,12.188 L5.0000015,5.8889998 z M2.1390007,1.25 L5.8890014,4.9999999 C6.0060015,5.1179999 6.0950017,5.2530001 6.1570015,5.406 6.2190018,5.5589999 6.2500019,5.7200001 6.2500019,5.8889998 L6.2500019,12.188 C6.2500019,12.481 6.2190018,12.733 6.1570015,12.945 6.0950017,13.156 6.0190015,13.345 5.9280014,13.511 5.8360014,13.677 5.7360015,13.825 5.6250015,13.956 5.5140014,14.086 5.4140015,14.218 5.3220015,14.351 5.2310014,14.484 5.1550012,14.628 5.0930014,14.781 5.0310016,14.934 5.0000015,15.111 5.0000015,15.313 L5.0000015,16.251 13.750003,16.251 13.750003,13.438 C13.750003,13.236 13.719003,13.061 13.657004,12.911 13.595004,12.761 13.519003,12.619 13.428004,12.486 13.336004,12.353 13.236003,12.219 13.125003,12.085 13.014003,11.952 12.914003,11.804 12.822003,11.641 12.731003,11.479 12.655003,11.29 12.593004,11.075 12.531004,10.86 12.500003,10.606 12.500003,10.313 L12.500003,1.25 z M0,0 L12.500003,0 C12.669003,0 12.831004,0.032999992 12.983003,0.097999871 13.136003,0.163 13.270004,0.253 13.384003,0.36700011 13.498004,0.48 13.587003,0.61399999 13.652004,0.76700002 13.717003,0.91999999 13.750003,1.081 13.750003,1.25 L13.750003,10.313 C13.750003,10.515 13.781004,10.69 13.843004,10.84 13.905004,10.99 13.981003,11.132 14.072004,11.265 14.164004,11.398 14.264003,11.532 14.375003,11.666 14.486003,11.799 14.586004,11.947 14.678004,12.11 14.769003,12.272 14.845004,12.461 14.907004,12.676 14.969004,12.891 15.000004,13.145 15.000004,13.438 L15.000004,16.251 C15.000004,16.42 14.967004,16.581 14.902004,16.734 14.837004,16.886999 14.748004,17.021 14.634004,17.133999 14.520004,17.248 14.386004,17.338 14.233004,17.403 14.081004,17.468001 13.919004,17.5 13.750003,17.5 L5.0000015,17.5 5.0000015,18.75 C5.0000015,19.004 4.9300013,19.235001 4.7900014,19.444001 4.6500011,19.652001 4.4630013,19.805001 4.2290011,19.903 4.0790012,19.968001 3.9190011,20 3.750001,20 3.405001,20 3.109001,19.876999 2.861001,19.629 L0,16.768 z" Fill="White" HorizontalAlignment="Center" Height="18" Stretch="Fill" VerticalAlignment="Center" Width="13.5"/>
</Button>
<Button ToolTipService.ToolTip="Mode" x:Name="FitWindow" Style="{StaticResource ButtonStyle}" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Click="ViewMode_Click" Height="40" Width="50">
<Path Data="M3.2889943,4.1640059 L3.9609933,4.8360052 3.2969942,5.5000043 6.5019898,5.5000043 6.5019898,6.5000029 3.2969942,6.5000029 3.9609933,7.1640022 3.2889943,7.8360012 1.4449968,6.0000036 z M11.720999,4.1640031 L13.56499,6.0000069 11.720999,7.8360033 11.048987,7.1639993 11.712988,6.5000064 8.5079901,6.5000064 8.5079901,5.5000076 11.712988,5.5000076 11.048987,4.8360068 z M1.0000005,0.99999976 L1.0000005,11 15,11 15,0.99999976 z M0,0 L16,0 16,12 0,12 z" Fill="White" HorizontalAlignment="Center" Height="16.2" Stretch="Fill" VerticalAlignment="Center" Width="18"/>
</Button>
</Grid>要求：
1）定义按钮的常用样式。
1) Defining common style for buttons.
2）按钮前景，按钮内容的前景，背景需要根据按钮的状态{启用，禁用，鼠标悬停，鼠标移动}进行更改。
2) The button foreground, button content's foreground, background needs to be changes based on the button's state {Enabled, disabled, mouse over, mouse moved}.
注意：当我使用文本块时，这种常见的样式按预期工作。但我只有图形路径，我需要具有视觉状态触发器的共同风格。
Note: When i use text block, this common styles work as expected. But i have graphics path alone and i need common style with visual state triggers.
屏幕截图：
请帮我解决问题。
谢谢，
Ayswarya
这篇关于按钮样式不影响xaml（uwp）中的路径前景/填充（路径几何）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
