删除切换按钮wpf的外边框

时间:2014-08-15 18:24:37

标签: c# wpf xaml

因此,我查看了许多人们想要弄乱按钮边框的问题。我正在使用切换按钮(WPF),似乎有一个'内部'边框和一个“外部”边框。我可以设法将内部边界变为红色,但我不知道如何改变外边框的颜色,甚至摆脱它。我已经摆脱了镀铬按钮或者aero主题附带的任何东西,但我仍然无法改变这个边界。这是我为切换按钮获取的图片:

enter image description here

正如您所看到的,边框中有白色。这是我的代码:

<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>

但我希望按钮看起来像是:

enter image description here

我通过覆盖默认按钮样式实现了上述按钮,但我似乎无法使用切换按钮执行此操作。我也试过重写单选按钮,我遇到了同样的问题。我错过了什么?我可以以某种方式使用Button样式而不是切换按钮样式吗?我刚刚开始学习样式,所以不要苛刻!欣赏所有输入!

2 个答案:

答案 0 :(得分:0)

controltemplate中的Button正在创建额外的边框。如果使用边框替换Button,则可以设置togglebutton边框的样式。你有没有理由使用Button?如果需要,您可以使用触发器提供按钮行为。见下文:

        <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>

答案 1 :(得分:0)

我只使用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>

我得到了我想要的视觉效果(我们会看看它们是否正常工作)。