XAML 如何使ComboBox的项目布局在UWP中采用全宽度

e3bfsja2  于 2022-12-08  发布在  其他
关注(0)|答案(2)|浏览(113)

我有下面的ComboBox,它为comboBox的ItemTemplate提供了一个自定义的DataTemplate:

<ComboBox SelectedIndex="{x:Bind PaletteType.GetHashCode()}"
                              x:Name="PaletteComboBox" MinWidth="200"
                              ItemsSource="{x:Bind ComboPalettes}"
                              SelectionChanged="PaletteComboBox_OnSelectionChanged">
    <ComboBox.ItemTemplate>
        <DataTemplate x:DataType="adapters:ComboPaletteAdapter">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                    <TextBlock Text="{x:Bind PaletteNameTranslatedResource}"
                                               HorizontalAlignment="Left"
                                               VerticalAlignment="Center"
                                               Margin="0,0,0,0" />
                    <StackPanel Orientation="Horizontal"
                                                HorizontalAlignment="Right"
                                                VerticalAlignment="Center" Spacing="8"
                                                Margin="0,4,0,0">
                        <Border Width="24"
                                                Height="24"
                                                Background="{x:Bind CurrentPalette.ColorRed, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}"
                                                CornerRadius="26"
                                                IsTapEnabled="False"
                                                x:Uid="SettingsPaletteColorRedTT" />
                        <Border Width="24"
                                                Height="24"
                                                Background="{x:Bind CurrentPalette.ColorOrange, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}"
                                                CornerRadius="26"
                                                IsTapEnabled="False"
                                                x:Uid="SettingsPaletteColorOrangeTT" />
                        <Border Width="24"
                                                Height="24"
                                                Background="{x:Bind CurrentPalette.ColorGreen, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}"
                                                CornerRadius="26"
                                                IsTapEnabled="False"
                                                x:Uid="SettingsPaletteColorGreenTT" />
                        <Border Width="24"
                                                Height="24"
                                                Background="{x:Bind CurrentPalette.ColorBlue, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}"
                                                CornerRadius="26"
                                                IsTapEnabled="False"
                                                x:Uid="SettingsPaletteColorBlueTT" />
                    </StackPanel>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

我想在颜色边框的左边添加一个文本,同时将颜色向右对齐,但似乎HorizontalAlignment="Stretch"不起作用。
项目占用的空间始终基于其内容:

我怎样才能使每一项都占据组合框下拉菜单的全部宽度?

svmlkihl

svmlkihl1#

如何使ComboBox的项目布局在UWP中采用全宽度
出现此行为的原因是您将列的Width设置为Auto。请使用*****代替。
就像这样:

<Grid.ColumnDefinitions>
 <ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>

如果你想让所有的颜色都向右对齐,你可以使用Grid而不是Stackpanel
下面是我使用的示例代码:

<ComboBox x:Name="PaletteComboBox" MinWidth="200"
                          ItemsSource="{x:Bind ComboPalettes}">
        <ComboBox.ItemTemplate>
            <DataTemplate >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid Background="Yellow"   >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding }"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Center"
                                   Grid.Column="0"
                                   Margin="0,0,0,0" />
                        <StackPanel Orientation="Horizontal"
                                    Spacing="8"
                                    Grid.Column="1"
                                    HorizontalAlignment="Right"
                                    Margin="0,4,0,0">
                            <Border Width="24"
                                    Height="24"
                                    Background="Red"
                                    CornerRadius="26"
                                    IsTapEnabled="False"
                                    x:Uid="SettingsPaletteColorRedTT" />
                            <Border Width="24" 
                                    Height="24"
                                    Background="Gray"
                                    CornerRadius="26"
                                    IsTapEnabled="False"
                                    x:Uid="SettingsPaletteColorOrangeTT" />
                            <Border Width="24" 
                                    Height="24" 
                                    Background="Green" 
                                    CornerRadius="26"
                                    IsTapEnabled="False"
                                    x:Uid="SettingsPaletteColorGreenTT" />
                            <Border Width="24"
                                    Height="24"
                                    Background="Blue"
                                    CornerRadius="26"
                                    IsTapEnabled="False"
                                    x:Uid="SettingsPaletteColorBlueTT" />
                        </StackPanel>
                    </Grid>
                </Grid>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>

结果如下所示:

pu82cl6c

pu82cl6c2#

不好看但这很有效。我不知道任何其他方式来访问可视化的WebsomboBox项目。

<ComboBox Name="ComboPalettesComboBox"
          ItemsSource="{Binding ComboPalettes}">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <Grid Loaded="ItemGrid_OnLoaded">
                    <DockPanel>
                        <TextBlock Text="{Binding}"/>
                        <StackPanel Orientation="Horizontal"
                                    HorizontalAlignment="Right">
                            <StackPanel.Resources>
                                <Style TargetType="Border">
                                    <Setter Property="Width" Value="24"/>
                                    <Setter Property="Height" Value="24"/>
                                    <Setter Property="CornerRadius" Value="26"/>
                                </Style>
                            </StackPanel.Resources>
                            <Border Background="Red"/>
                            <Border Background="Orange"/>
                            <Border Background="Green"/>
                            <Border Background="Blue"/>
                        </StackPanel>
                    </DockPanel>
                </Grid>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>
private readonly List<Grid> _gridList = new List<Grid>();
    private bool _gridListIsFull;
    private double _maxGridWidth;

    public MainWindow()
    {
        InitializeComponent();

        Loaded += (sender, args) =>
        {
            Popup popup = ComboPalettesComboBox.Template.FindName("PART_Popup", ComboPalettesComboBox) as Popup;

            popup.Opened += (o, args2) =>
            {
                foreach (Grid grid in _gridList)
                {
                    grid.Width = _maxGridWidth;
                }

                _gridListIsFull = true;
            };
        };
    }

    private void ItemGrid_OnLoaded(object sender, RoutedEventArgs e)
    {
        if (_gridListIsFull)
        {
            _gridList.Clear();
            _gridListIsFull = false;
            _maxGridWidth = 0;
        }

        Grid grid = (Grid)sender;

        if (grid.ActualWidth > _maxGridWidth)
        {
            _maxGridWidth = grid.ActualWidth;
        }

        _gridList.Add(grid);
    }

相关问题