[英]Removing outer border of toggle button wpf
因此,我浏览了许多问题,人们想弄乱按钮的边框。 我正在使用切换按钮(WPF),似乎有一个“内部”边框和一个“外部”边框。 我可以设法将内部边界更改为红色,但是我不知道如何更改外部边界的颜色,甚至摆脱它。 我已经摆脱了chrome按钮或Aero主题附带的任何内容,但仍然无法更改此边框。 这是我对切换按钮的了解:
如您所见,边框中有白色。 这是该样式的代码:
<Style x:Key="Style1" TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="Black"/>
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Button BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" Foreground="White">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Button>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
</Trigger>
<Trigger Property="IsChecked" Value="true">
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
我正在这样使用它:
<ListBox SelectionMode="Single" Name="touchPanel" Grid.Row="2" Grid.Column="3" Width="Auto" Height="Auto" VerticalAlignment="Top" Background="Black" BorderThickness="0">
<RadioButton Width="60" Height="60" Name="mouseTouchSelection" IsChecked="True" Content="Mouse" Style="{DynamicResource RadioButtonStyle1}" />
<RadioButton Width="60" Height="60" Name="panTouchSelection" BorderThickness="0" Content="Pan" Style="{DynamicResource RadioButtonStyle1}" />
<RadioButton Width="60" Height="60" Name="rotateTouchSelection" Content="Rotate" Style="{DynamicResource RadioButtonStyle1}"/>
<RadioButton Width="60" Height="60" Name="zoomBoxTouchSelection" Content="Box Zoom" Style="{DynamicResource RadioButtonStyle1}" />
</ListBox>
但是我希望按钮看起来像是:
我仅通过覆盖默认按钮样式即可实现上述按钮,但似乎无法使用“切换按钮”来实现。 我也尝试覆盖单选按钮,但我遇到了同样的问题。 我想念什么? 我可以以某种方式使用按钮样式而不是切换按钮样式吗? 我才刚开始学习样式,所以不要苛刻! 感谢所有输入!
控制模板中的按钮将创建额外的边框。 如果将“按钮”替换为“边框”,则可以设置“切换按钮”边框的样式。 您使用按钮有原因吗? 如果需要,您可以使用触发器来提供按钮行为。 见下文:
<Style x:Key="Style1" TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="Black"/>
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Name="Border" BorderThickness="1" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" >
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource DarkBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}"/>
</Trigger>
<Trigger Property="IsChecked" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource CheckedBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
我仅使用Buttons,RadioButtons和ToggleButtons对其进行了测试,但是尝试将按钮与列表框嵌套时会出现问题。 所以我将代码从:
<ListBox SelectionMode="Single" Name="touchPanel" Grid.Row="2" Grid.Column="3" Width="Auto" Height="Auto" VerticalAlignment="Top" Background="Black" BorderThickness="0">
<RadioButton Width="60" Height="60" Name="mouseTouchSelection" IsChecked="True" Content="Mouse" Style="{DynamicResource RadioButtonStyle1}" />
<RadioButton Width="60" Height="60" Name="panTouchSelection" BorderThickness="0" Content="Pan" Style="{DynamicResource RadioButtonStyle1}" />
<RadioButton Width="60" Height="60" Name="rotateTouchSelection" Content="Rotate" Style="{DynamicResource RadioButtonStyle1}"/>
<RadioButton Width="60" Height="60" Name="zoomBoxTouchSelection" Content="Box Zoom" Style="{DynamicResource RadioButtonStyle1}" />
</ListBox>
至:
<StackPanel Grid.Column="3" Grid.Row="2">
<RadioButton Width="60" Height="60" Name="mouseTouchSelection" IsChecked="True" Content="Mouse" Style="{DynamicResource RadioButtonStyle1}" />
<RadioButton Width="60" Height="60" Name="panTouchSelection" BorderThickness="0" Content="Pan" Style="{DynamicResource RadioButtonStyle1}" />
<RadioButton Width="60" Height="60" Name="rotateTouchSelection" Content="Rotate" Style="{DynamicResource RadioButtonStyle1}"/>
<RadioButton Width="60" Height="60" Name="zoomBoxTouchSelection" Content="Box Zoom" Style="{DynamicResource RadioButtonStyle1}" />
</StackPanel>
我得到了想要的视觉效果(我们将看看它们是否正常工作)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.