在检查ToggleButton时，如何更改ToggleButton的边框角半径？
在检查ToggleButton时，如何更改ToggleButton的边框角半径？
提问于 2021-11-25 09:38:23
我有一个ComboBox，它有一个Style，其中一个ToggleButton在上面。我给了它一个CornerRadius，当我检查ToggleButton和我的ComboBox打开时，底部的CornerRadius应该会改变。我的ComboBox风格：
<Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}">
<Setter Property="Foreground" Value="#D4D4E1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<ToggleButton Name="PART_EditableTextBox"
Style="{StaticResource MyButton}"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Padding="5,0,0,0" BorderThickness="0"
Height="{TemplateBinding Height}">
<ToggleButton.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="10 0 0 10"/>
</Style>
</ToggleButton.Resources>
</ToggleButton>
<ToggleButton Grid.Column="1" Margin="0" Background="#2C2F33"
Height="{TemplateBinding Height}" Style="{StaticResource MyButton}"
Focusable="False" BorderThickness="0"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
<Path Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="LightBlue" />
<ToggleButton.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="0 10 10 0"/>
</Style>
</ToggleButton.Resources>
</ToggleButton>
<ContentPresenter Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="5,0,0,0"/>
<Popup Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border
x:Name="DropDownBorder"
BorderThickness="0"
CornerRadius="0 0 7 7"
Background="#2E3136"
BorderBrush="Black"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>我的ToggleButton风格：
<Style x:Key="MyButton" TargetType="{x:Type ToggleButton}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Background" Value="#2C2F33" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Name="border" BorderThickness="0" BorderBrush="Black" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0.8" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="" Property="" Value="0.8" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>当ComboBox关闭时，它看起来是这样的：
当它打开时，它看起来是这样的：
但是，我无法更改底部的CornerRadius，使其看起来像Google：
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-11-25 10:23:00
您可以将DataTrigger添加到ToggleButton样式中，根据ComboBox的IsDropDownOpen属性更改CornerRadius，该属性指示是否显示Popup。
<DataTrigger Binding="{Binding IsDropDownOpen, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="True">
<Setter Property="CornerRadius" Value="10 0 0 0" />
</DataTrigger><DataTrigger Binding="{Binding IsDropDownOpen, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="True">
<Setter Property="CornerRadius" Value="0 10 0 0" />
</DataTrigger>RelativeSource用于将父ComboBox作为源引用。这是完整的代码：
<Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}">
<Setter Property="Foreground" Value="#D4D4E1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<ToggleButton Name="PART_EditableTextBox"
Style="{StaticResource MyButton}"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Padding="5,0,0,0" BorderThickness="0"
Height="{TemplateBinding Height}">
<ToggleButton.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="10 0 0 10"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsDropDownOpen, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="True">
<Setter Property="CornerRadius" Value="10 0 0 0" />
</DataTrigger>
</Style.Triggers>
</Style>
</ToggleButton.Resources>
</ToggleButton>
<ToggleButton Grid.Column="1" Margin="0" Background="#2C2F33"
Height="{TemplateBinding Height}" Style="{StaticResource MyButton}"
Focusable="False" BorderThickness="0"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
<Path Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="LightBlue" />
<ToggleButton.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="0 10 10 0"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsDropDownOpen, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" Value="True">
<Setter Property="CornerRadius" Value="0 10 0 0" />
</DataTrigger>
</Style.Triggers>
</Style>
</ToggleButton.Resources>
</ToggleButton>
<ContentPresenter Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="5,0,0,0"/>
<Popup Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border
x:Name="DropDownBorder"
BorderThickness="0"
CornerRadius="0 0 7 7"
Background="#2E3136"
BorderBrush="Black"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>关闭和打开的状态如下所示：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70108794
复制相关文章
相似问题
腾讯云开发者
