Измените пользовательское поведение кнопки переключения в WPF

#wpf

#wpf

Вопрос:

Я новичок в WPF.

Как изменить поведение кнопки переключения. введите описание изображения здесь на введите описание изображения здесь с черным округлением и без рамки. Нужно ли использовать шаблон управления?

Ответ №1:

Вам необходимо изменить шаблон или стиль элемента управления, чтобы изменить внешний вид существующего доступного элемента управления. Взгляните на этот пример, который в чем-то похож на ваше требование. что я сделал, так это изменил Chrome (стиль Windows по умолчанию) и создал свой собственный стиль с помощью Border и content presenter. Затем я создал триггеры для стиля. Для визуализации в событии наведения курсора мыши и ischecked я меняю цвет фона границы.

 <Window.Resources>
    <Style x:Key="ToggleButtonStyle1" TargetType="{x:Type ToggleButton}">
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <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 x:Name="border">
                        <ContentPresenter 
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                        RecognizesAccessKey="True" TextElement.Foreground="White" HorizontalAlignment="Center"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocused" Value="true"/>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="Background" TargetName="border" Value="#FF6C6C6C"/>
                            <Setter Property="CornerRadius" TargetName="border" Value="5"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border" Value="#FF282828"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid x:Name="LayoutRoot">
    <ToggleButton HorizontalAlignment="Left" Margin="136,59,0,0" Style="{DynamicResource ToggleButtonStyle1}" VerticalAlignment="Top" Width="27" Height="24" Content="-" FontSize="21.333" FontWeight="Bold" HorizontalContentAlignment="Center" Padding="0" VerticalContentAlignment="Center" IsThreeState="True"/>
</Grid>
  

Ответ №2:

Да, вы хотите использовать ControlTemplate , чтобы изменить то, как ToggleButton выглядит. Взгляните на страницу для ToggleButton , а также на эту статью:

Настройка внешнего вида существующего элемента управления путем создания ControlTemplate

для начала.