Question

根据关于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的内容，宽度为自动。也许有问题，因为我不知道如何为CheckBox内容设置100％的宽度。

将此代码添加到CheckBox无济于事

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

Answer 1

您正在寻找HorizontalContentAlignment上的ComboBox。默认设置为Left，因此您只需将其更改为Stretch。

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

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

另外，WrapPanel最好不要成为DockPanel或Grid，因为WrapPanel本质上会将其内容与左侧对齐。

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

修改

正如您已经尝试过的那样，将HorizontalConntentAlignment设置为CheckBox就可以了。这是因为WrapPanel位于里面 CheckBox，内容与左边对齐，就像上面描述的行为一样。

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

1 个答案: