gpt4 book ai didi

WPF RadioButton/ToggleButton 样式

转载 作者:行者123 更新时间:2023-12-03 23:44:14 25 4
gpt4 key购买 nike

我想模仿一组 ToggleButtons 的样式,如下图所示。任何时候都只能“检查”其中一个按钮。

enter image description here

我的问题与样式有关:

  • 我想在最左边的按钮和最右边的按钮上有圆角,如图所示,但如果中间有一个按钮(如图所示),则不应有圆角。有时可能只有两个按钮可以切换。
  • 我需要不同状态的样式:至少“正常/未选中”、“鼠标悬停”、“按下”和“选中”。

  • 我为此使用的当前控件是这样完成的:
    <StackPanel Orientation="Horizontal" >
    <RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="All" Padding="12,8,12,8" GroupName="View" />
    <RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="Geolocated" Padding="12,8,12,8" GroupName="View" />
    <RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="Non Geolocated" Padding="12,8,12,8" GroupName="View" />
    </StackPanel>

    在 StackPanel 资源中,我试图为 ToggleButton 设置样式,但我非常不知道如何实现如上图所示的结果。

    最佳答案

    这可能不是最简单/最好的方法,但我尝试了一些 ControlTemplates使用 Kaxaml,生成如下所示的内容:

    Button Preview

    您可以将这些模板存储在 ResourceDictionary 中。并在需要时应用它们,或者在您即时构建按钮列表时使用它们。

    我实际上创建了三种稍微不同的样式,一种用于左右按钮,一种用于中间(您可以通过扩展/继承样式来简化这一点)。省略了一些重复的代码。

    <Grid>
    <Grid.Resources>
    <!-- Brushes for colours/backgrounds -->
    <SolidColorBrush x:Key="FontBrush" Color="#DDDDDD"/>

    <LinearGradientBrush x:Key="BgBrush1" StartPoint="0,0" EndPoint="0,1">
    <GradientStop Offset="0" Color="#888888"/>
    <GradientStop Offset="1" Color="#222222"/>
    </LinearGradientBrush>

    <SolidColorBrush x:Key="BorderBrush1" Color="#333333"/>
    <LinearGradientBrush x:Key="CheckedBrush" StartPoint="0,0" EndPoint="0,1">
    <GradientStop Offset="0" Color="#555555"/>
    <GradientStop Offset="1" Color="#111111"/>
    </LinearGradientBrush>

    <!-- Left Button Template -->
    <ControlTemplate x:Key="ToggleButtonLeft" TargetType="{x:Type ToggleButton}">
    <Border
    Name="Border"
    Background="{StaticResource BgBrush1}"
    BorderBrush="{StaticResource BorderBrush1}"
    BorderThickness="1"
    CornerRadius="5,0,0,5">
    <ContentPresenter
    HorizontalAlignment="Center"
    Margin="{TemplateBinding Padding}"
    VerticalAlignment="Center"
    Content="{TemplateBinding Content}"
    TextBlock.FontWeight="Bold"
    TextBlock.Foreground="{StaticResource FontBrush}"/>
    </Border>
    <ControlTemplate.Triggers>
    <Trigger Property="ToggleButton.IsMouseOver" Value="true">
    <Setter TargetName="Border" Property="Background" Value="#808080"/>
    </Trigger>
    <Trigger Property="IsChecked" Value="true">
    <Setter TargetName="Border" Property="Background" Value="{StaticResource CheckedBrush}"/>
    </Trigger>
    </ControlTemplate.Triggers>
    </ControlTemplate>

    <!-- Middle Button(s) Template -->
    <ControlTemplate x:Key="ToggleButtonMid" TargetType="{x:Type ToggleButton}">
    <Border
    Name="Border"
    Background="{StaticResource BgBrush1}"
    BorderBrush="{StaticResource BorderBrush1}"
    BorderThickness="0,1,0,1"
    CornerRadius="0" />
    <!-- Other code identical to Left Button Template -->
    </ControlTemplate>

    <!-- Right Button Template -->
    <ControlTemplate x:Key="ToggleButtonRight" TargetType="{x:Type ToggleButton}">
    <Border
    Name="Border"
    Background="{StaticResource BgBrush1}"
    BorderBrush="{StaticResource BorderBrush1}"
    BorderThickness="1"
    CornerRadius="0, 5, 5, 0" />
    <!-- Other code identical to Left Button Template -->
    </ControlTemplate>
    </Grid.Resources>

    <!-- Example Usage -->
    <Grid Background="#555555">
    <StackPanel Height="25" Orientation="Horizontal" Margin="5">
    <RadioButton Content="All" GroupName="View" Padding="2" Template="{DynamicResource ToggleButtonLeft}"/>
    <RadioButton Content="Geolocated" GroupName="View" Padding="2" Template="{DynamicResource ToggleButtonMid}"/>
    <RadioButton Content="Non Geolocated" GroupName="View" Padding="2" Template="{DynamicResource ToggleButtonRight}"/>
    </StackPanel>
    </Grid>
    </Grid>

    您必须添加额外的 Triggers等为 IsPressed状态,以及任何其他需要的(例如 IsEnabled )。

    关于WPF RadioButton/ToggleButton 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18390528/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com