使 DropDown 中的图像在同一垂直线上

Question

根据 post 关于 MultipleComboBox，我创建了自己的控件。现在我正在研究它的造型。

DropDown 现在看起来像

如您所见 - 图片位于文本之后，其位置取决于文本长度。

我想将图像右对齐。

XAML :

<ComboBox
    x:Name="MultiSelectCombo"  
    SnapsToDevicePixels="True"
    OverridesDefaultStyle="True"
    ScrollViewer.HorizontalScrollBarVisibility="Hidden"
    ScrollViewer.VerticalScrollBarVisibility="Auto"
    ScrollViewer.CanContentScroll="True"
    IsSynchronizedWithCurrentItem="True"
    StaysOpenOnEdit="True"
    Background="#61596f"
    HorizontalAlignment="Stretch">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <CheckBox Margin="0,0,10,0" HorizontalAlignment="Stretch" VerticalAlignment="Center"
                          FontFamily="Segoe UI Semibold" FontSize="14" Foreground="#FFC0B6D1"
                        IsChecked="{Binding Path=IsSelected, Mode=TwoWay}"
                        Tag="{RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}"
                        Click="CheckBox_Click" IsTabStop="False" >
                <WrapPanel>
                    <TextBlock Text="{Binding Title}" Margin="0 0 15 0"/>
                    <Image Width="30" Height="30" HorizontalAlignment="Right" Name="ImageCheckBox">
                        <Image.Style>
                            <Style TargetType="{x:Type Image}">
                                <Setter Property="Source" Value="/Assets/logo-nike.png" />
                            </Style>
                        </Image.Style>
                    </Image>
                </WrapPanel>
            </CheckBox>
        </DataTemplate>
    </ComboBox.ItemTemplate>
    <ComboBox.ItemContainerStyle>
        <Style TargetType="{x:Type ComboBoxItem}">
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                        <Border x:Name="Bd"
                            SnapsToDevicePixels="true"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="0"
                            Padding="{TemplateBinding Padding}">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ComboBox.ItemContainerStyle>
    <ComboBox.Template>
        <ControlTemplate TargetType="ComboBox">
            <Grid>

                <ToggleButton Name="ToggleButton" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                    Focusable="False" ClickMode="Press" HorizontalContentAlignment="Left">
                    <ToggleButton.Content>
                        <Grid Grid.Row="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <TextBlock TextTrimming="CharacterEllipsis" Grid.Column="0" Margin="10,0,0,0" Text="{Binding Path=DefaultText,Mode=TwoWay,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}" VerticalAlignment="Center" FontFamily="Segoe UI Semibold" FontSize="12" Foreground="#c0b6d1" />
                            <Image Grid.Column="1" Margin="10,0" Width="12" Height="6" HorizontalAlignment="Right" VerticalAlignment="Center" Source="/Assets/filter-arrow.png" Name="FiltersItemButton" />
                        </Grid>
                    </ToggleButton.Content>
                    <ToggleButton.Template>
                        <ControlTemplate TargetType="{x:Type ToggleButton}">
                            <Border Name="Border" BorderThickness="1 0 1 1" Background="#61596f" BorderBrush="#544C63" Height="44">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="Border" Property="Background" Value="#FF826C83" />
                                </Trigger>
                                <Trigger Property="IsPressed" Value="True">
                                    <Setter TargetName="Border" Property="Background" Value="#FF826C83" />
                                    <Setter TargetName="Border" Property="BorderBrush" Value="#FF826C83" />
                                </Trigger>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter TargetName="Border" Property="Background" Value="#FF826C83" />
                                    <Setter TargetName="Border" Property="BorderBrush" Value="#FF826C83" />
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter TargetName="Border" Property="Background" Value="#FF826C83" />
                                    <Setter TargetName="Border" Property="BorderBrush" Value="#FF826C83" />
                                    <Setter Property="Foreground" Value="#61596f"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </ToggleButton.Template>
                </ToggleButton>

                <Popup Name="Popup" Placement="Bottom" AllowsTransparency="True" Focusable="False" IsOpen="{TemplateBinding IsDropDownOpen}" PopupAnimation="Slide">
                    <Grid Background="#FF826C83" Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
                        <Border Background="#61596f" VerticalAlignment="Top" CornerRadius="0,0,3,3" x:Name="DropDownBorder" BorderThickness="1" BorderBrush="#61596f">
                            <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True" DataContext="{Binding}"  VerticalScrollBarVisibility="Auto">
                                <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>
                        </Border>
                    </Grid>
                </Popup>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="HasItems" Value="false">
                    <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
                </Trigger>
                <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
                    <Setter TargetName="DropDownBorder" Property="Margin" Value="0,0,0,0"/>
                </Trigger>
                <Trigger SourceName="Popup" Property="Popup.IsOpen" Value="True">
                    <Setter TargetName="FiltersItemButton" Property="LayoutTransform">
                        <Setter.Value>
                            <RotateTransform Angle="180"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ComboBox.Template>
</ComboBox>

文本和图像 - 是 CheckBox 的内容，它的宽度是自动的。可能有问题，因为我不知道如何将复选框内容的宽度设置为 100%。

将此代码添加到 CheckBox 没有帮助

Width="{Binding ElementName=MultiSelectCombo, Path=ActualWidth}"

Answer 1

您要查找的是 ComboBox 上的 HorizontalContentAlignment。默认设置为 Left，因此您只需将其更改为 Stretch.

<ComboBox HorizontalContentAlignment="Stretch"
          ... />

这将确保您的 ComboBox 中的 Content 将拉伸到 ComboBox 的最大范围，而不是内容的宽度。

此外，您的 WrapPanel 最好是 DockPanel 或 Grid，因为 WrapPanel 本质上会将其内容左对齐。

<DockPanel LastChildFill="True">
    <Image DockPanel.Dock="Right" ... />        
    <TextBlock DockPanel.Dock="Left" ... />
</DockPanel>

编辑

正如您所试验的那样，将 HorizontalConntentAlignment 设置为 CheckBox 就可以了。这是因为 WrapPanel 位于内部 CheckBox 并且内容向左对齐，很像上面描述的行为。

使 DropDown 中的图像在同一垂直线上

Make images in DropDown be in same vertical line

.net

c#

wpf

xaml

alignment