Extended Toolkit SplitButton：使用 ComboBox ItemsSource 作为 DropDownContent

Question

我想重构我的代码以使用Extended Toolkit SplitButton 而不是标准Combobox。

这是我的初始工作代码：

<ComboBox ItemsSource="{Binding Path=VisualizationList, Mode=TwoWay}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock
                    Text="{Binding Converter={StaticResource MultiLangConverter}/>
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

这是我的SplitButton

<xctk:SplitButton Content="Click Me">
    <xctk:SplitButton.DropDownContent>
        <!-- What should I use here? -->
    </xctk:SplitButton.DropDownContent>
</xctk:SplitButton>

现在，我想将 ItemsSource 设置为 SplitButton 以使其表现得像标准的 ComboBox 按钮。 有没有办法获得这种行为？

如果你需要，这里是我的SplitButtonControlTemplate的样式。

<ControlTemplate x:Key="SplitButtonTemplate" TargetType="xctk:SplitButton">
<Grid x:Name="MainGrid" SnapsToDevicePixels="True">
    <xctk:ButtonChrome x:Name="ControlChrome" Background="{TemplateBinding Background}"
                       RenderEnabled="{TemplateBinding IsEnabled}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button x:Name="PART_ActionButton"
                    Margin="0"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                    Padding="{TemplateBinding Padding}"
                    Tag="{TemplateBinding Tag}"
                    Style="{StaticResource BlackButton}">
                <ContentPresenter Name="ActionButtonContent" Margin="{TemplateBinding Padding}"
                                          Content="{TemplateBinding Content}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          RecognizesAccessKey="true" />
            </Button>
            <ToggleButton x:Name="PART_ToggleButton"
                          Grid.Column="1"
                          IsTabStop="False"
                          IsChecked="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
                <ToggleButton.Template>
                    <ControlTemplate TargetType="ToggleButton">
                        <ContentPresenter />
                    </ControlTemplate>
                </ToggleButton.Template>
                <Grid>
                    <xctk:ButtonChrome x:Name="ToggleButtonChrome"
                                       RenderNormal="False"
                                       RenderChecked="{TemplateBinding IsOpen}"
                                       RenderEnabled="{TemplateBinding IsEnabled}"
                                       RenderMouseOver="{Binding IsMouseOver, ElementName=PART_ToggleButton}"
                                       RenderPressed="{Binding IsPressed, ElementName=PART_ToggleButton}">
                        <Grid x:Name="arrowGlyph" IsHitTestVisible="False" Margin="15,6,15,6">
                            <Path Width="7" Height="4"
                                  Data="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"
                                      Fill="White" />
                            </Grid>
                        </xctk:ButtonChrome>
                    </Grid>
                </ToggleButton>
            </Grid>
        </xctk:ButtonChrome>
        <Popup IsOpen="{Binding IsChecked, ElementName=PART_ToggleButton}"
               AllowsTransparency="True"
               PopupAnimation="Slide">
            <Grid x:Name="DropDown"
                  MinWidth="{TemplateBinding ActualWidth}"
                  MaxHeight="{TemplateBinding MaxDropDownHeight}">
                <Border x:Name="DropDownBorder" BorderBrush="{StaticResource StandardBorderColor}"
                        Background="{StaticResource ComboBoxBackgroundColor}" />
                <ScrollViewer>
                    <ContentPresenter Content="{TemplateBinding DropDownContent}" />
                </ScrollViewer>
            </Grid>
        </Popup>
    </Grid>
</ControlTemplate>
<Style TargetType="xctk:SplitButton">
    <Setter Property="Template" Value="{StaticResource SplitButtonTemplate}" />
</Style>

Answer 1

一种方法是将ListBox 添加为SplitButton 的内容。

您必须根据需要添加自定义代码才能获得所需的确切行为，但这里有一个示例可以帮助您入门：

<xctk:SplitButton x:Name="btnSplit" Content="Select a product...">
    <xctk:SplitButton.DropDownContent>
        <ListBox ItemsSource="..."
                 SelectionChanged="ListBox_SelectionChanged">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding ProductName}" />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </xctk:SplitButton.DropDownContent>
</xctk:SplitButton>

private void ListBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
    ListBox content = (ListBox)sender;
    btnSplit.Content = ((DataRowView)content.SelectedItem)["ProductName"].ToString();
    btnSplit.IsOpen = false;
}