Question

我正在使用WPF toolkit的CheckComboBox。我需要更改Popup style的{{1}}。（即，当选中CheckComboBox时，应更改项目的CheckBox，等等）。在使用Backcolor尝试探索控件时，我找不到任何模板来编辑其项目模板。

有人可以建议如何自定义Blend的模板吗？

我尝试使用Blend。

enter image description here

感谢您的期待。

Answer 1

可能问题已经过时了，但是在git上有一些提到的控制代码：https://github.com/samoatesgames/mui.extended.toolkit/blob/master/ModernUI.Xceed/ModernUI.Xceed.Toolkit/Assets/Controls/CheckComboBox.xaml

这是CheckComboBox的样式，您可以在其中找到Popup和模板的其他元素。

<xctk:InverseBoolConverter x:Key="InverseBoolConverter" />

<Geometry x:Key="DownArrowGeometry">M 0,1 C0,1 0,0 0,0 0,0 3,0 3,0 3,0 3,1 3,1 3,1 4,1 4,1 4,1 4,0 4,0 4,0 7,0 7,0 7,0 7,1 7,1 7,1 6,1 6,1 6,1 6,2 6,2 6,2 5,2 5,2 5,2 5,3 5,3 5,3 4,3 4,3 4,3 4,4 4,4 4,4 3,4 3,4 3,4 3,3 3,3 3,3 2,3 2,3 2,3 2,2 2,2 2,2 1,2 1,2 1,2 1,1 1,1 1,1 0,1 0,1 z</Geometry>

<Style x:Key="ComboBoxToggleButton"
      TargetType="{x:Type ToggleButton}">
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="IsTabStop" Value="false" />
    <Setter Property="Focusable" Value="false" />
    <Setter Property="Padding" Value="2" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <xctk:ButtonChrome x:Name="Chrome"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                Background="{TemplateBinding Background}"
                                CornerRadius="0"
                                RenderEnabled="{TemplateBinding IsEnabled}"
                                RenderMouseOver="{Binding IsMouseOver, ElementName=PART_DropDownButton}"
                                RenderNormal="False"
                                RenderPressed="{Binding IsPressed, ElementName=PART_DropDownButton}"
                                SnapsToDevicePixels="true">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0" />
                        </Grid.ColumnDefinitions>

                        <TextBox x:Name="TextBox"
                          Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                          Foreground="{TemplateBinding Foreground}"
                          BorderThickness="0"
                          Background="Transparent"
                          IsReadOnly="True"
                          Focusable="False"
                          Cursor="Arrow"
                          Margin="{TemplateBinding Padding}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                          HorizontalScrollBarVisibility="Hidden"
                          VerticalScrollBarVisibility="Hidden" />
                        <Grid Grid.Column="1"
                       HorizontalAlignment="Right"
                       Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
                            <Path x:Name="Arrow"
                              Data="{StaticResource DownArrowGeometry}"
                              Fill="{DynamicResource ItemText}"
                              HorizontalAlignment="Center"
                              Margin="3,0,3,0"
                              VerticalAlignment="Center" />
                        </Grid>
                    </Grid>
                </xctk:ButtonChrome>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked"
                       Value="true">
                        <Setter Property="RenderPressed"
                         TargetName="Chrome"
                         Value="true" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Fill" TargetName="Arrow" Value="{DynamicResource ItemTextDisabled}" />
                    </Trigger>
                    <DataTrigger Binding="{Binding IsEditable, RelativeSource={RelativeSource AncestorType={x:Type xctk:CheckComboBox}}}" Value="True">
                        <Setter Property="IsReadOnly" Value="False" TargetName="TextBox" />
                        <Setter Property="Focusable" Value="True" TargetName="TextBox" />
                        <Setter Property="Cursor" Value="{x:Null}" TargetName="TextBox" />
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="{x:Type xctk:CheckComboBox}">
    <Setter Property="Foreground" Value="{DynamicResource ItemText}" />
    <Setter Property="Background" Value="{DynamicResource WindowBackground}" />
    <Setter Property="BorderBrush" Value="{DynamicResource ItemBorder}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
    <Setter Property="Padding" Value="2" />
    <Setter Property="ScrollViewer.CanContentScroll" Value="true" />
    <Setter Property="ScrollViewer.PanningMode" Value="Both" />
    <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type xctk:CheckComboBox}">
                <Grid x:Name="MainGrid"
                 SnapsToDevicePixels="true">
                    <Popup x:Name="PART_Popup"
                     AllowsTransparency="true"
                     IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                     StaysOpen="False"
                     Margin="1"
                     PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}"
                     Placement="Bottom">
                        <Grid MinWidth="{Binding ActualWidth, ElementName=MainGrid}">
                            <Border x:Name="DropDownBorder"
                            Padding="2"
                            MaxHeight="{Binding MaxDropDownHeight,  RelativeSource={RelativeSource TemplatedParent}}"
                            BorderBrush="{DynamicResource WindowBorderActive}"
                            BorderThickness="1"
                            Background="{DynamicResource PopupBackground}">
                                <ScrollViewer x:Name="DropDownScrollViewer">
                                    <Grid RenderOptions.ClearTypeHint="Enabled">
                                        <Canvas HorizontalAlignment="Left"
                                     Height="0"
                                     VerticalAlignment="Top"
                                     Width="0">
                                            <Rectangle x:Name="OpaqueRect"
                                           Fill="{Binding Background, ElementName=DropDownBorder}"
                                           Height="{Binding ActualHeight, ElementName=DropDownBorder}"
                                           Width="{Binding ActualWidth, ElementName=DropDownBorder}" />
                                        </Canvas>
                                        <ItemsPresenter x:Name="PART_ItemsPresenter"
                                             KeyboardNavigation.DirectionalNavigation="Contained"
                                             SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                    </Grid>
                                </ScrollViewer>
                            </Border>
                        </Grid>
                    </Popup>

                    <Border  Background="{TemplateBinding Background}"
                       BorderBrush="{TemplateBinding BorderBrush}"
                       BorderThickness="{TemplateBinding BorderThickness}" />
                    <ToggleButton x:Name="PART_DropDownButton"
                            Content="{Binding Text, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Background="{TemplateBinding Background}"
                            Focusable="False"
                            IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                            Style="{StaticResource ComboBoxToggleButton}"
                            Padding="{TemplateBinding Padding}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            IsHitTestVisible="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InverseBoolConverter}}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver"
              Value="True">
            <Setter Property="BorderBrush" Value="{DynamicResource Accent}" />
        </Trigger>
        <Trigger Property="IsKeyboardFocusWithin" Value="True">
            <Setter Property="BorderBrush" Value="{DynamicResource Accent}" />
        </Trigger>
    </Style.Triggers>
</Style>

但是，如果您需要更改所选项目的背景，则需要修改SelectorItem样式，例如

<Style TargetType="xctk:SelectorItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type xctk:SelectorItem}">
                            <Border x:Name="_background" 
                                    Background="{TemplateBinding Background}" 
                                    BorderBrush="{TemplateBinding BorderBrush}" 
                                    BorderThickness="{TemplateBinding BorderThickness}">

                                <CheckBox IsChecked="{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent}}"
                                          Padding="{TemplateBinding Padding}"
                                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                    <CheckBox.Content>
                                        <ContentControl Content="{TemplateBinding Content}"
                                                        ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                                        Foreground="{TemplateBinding Foreground}" />
                                    </CheckBox.Content>
                                </CheckBox>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="true">
                                    <Setter TargetName="_background" Property="Background" Value="Red" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

WPF Toolkit模板中的CheckComboBox自定义

1 个答案: