我目前正试图实现我的用户体验设计师的愿望,设计一个按钮。
目标是更改按钮的样式,使其始终在右侧包含固定的图形,并在设置按钮内容时修改左侧的剩余空间。理想情况下,该图形还需要在按下时稍微改变其背景颜色。
目前我正在尝试通过修改默认按钮样式的副本来实现这一点。
<Style x:Key="PopUpButton" TargetType="Button">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<!-- Other setters needed for the Button -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver" />
<VisualState x:Name="Pressed">
<Storyboard>
<!-- Animation Targeting background of static graphic -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="#D5DEEB}" />
</ObjectAnimationUsingKeyFrames>
-->
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{StaticResource AppBarEllipsisButtonInnerBorderMargin}" Padding="0" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" AutomationProperties.AccessibilityView="Raw" Control.IsTemplateFocusTarget="True" />
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- Where i want content to appear -->
<Grid Grid.Column="0" Content = "{TemplateBinding Content}"/>
<!-- Where i want the static content located -->
<Border Grid.Column="1" Background="#F2F5FA">
<TextBlock Text = ">"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
我知道以下原因导致此解决方案不起作用:
- 无法将属性元素添加到ControlTemplates的网格的内容中
- 即使有可能,内容也不是网格中的可绑定属性。
- 图像将是理想的使用,而不是边框/文本块组合。但是我相信它不支持在样式中添加图像。
我还考虑了以下几点:
<Setter Property="Content">
<Setter.Value>
<Grid>
<!-- Static content here -->
</Grid>
</Setter.Value>
</Setter>
然而,每当我试图向按钮添加文本时,它就会被替换,因为我会否决这个setter。
我很想,如果爱任何帮助我的问题,我做relize,我想要的可能是不可能的,我需要使用自定义控制或用户控制,这确实感觉有点像重新发明轮子tho。
1条答案
按热度按时间bvjveswy1#
按钮的
Content
必须使用ContentPresenter
(已经在ControlTemplate
中)显示,而不是新的Grid
。请确保对
Content
和ContentTemplate
属性都使用TemplateBinding
。如果你想要一个更完整(但也更复杂)的例子,你可以在这里找到一个类似的
Button
样式,它也显示了图标旁边的按钮内容。