如何在水平stackPanel WPF中自动调整childerin的大小答案

【问题标题】：how to auto resize of childerin in horizontal stackPanel WPF如何在水平stackPanel WPF中自动调整childerin的大小
【发布时间】：2020-12-07 20:00:12
【问题描述】：

我尝试在 WPF 中构建一个类似于 Google Chrome 标题栏的标题

我做了以下

 <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
        <!--taps -->
        <StackPanel Orientation="Horizontal" Grid.Column="0">
            <!--open taps-->
            <local:TitleWindowTap  />
            <local:TitleWindowTap  />
            <!--add tap button-->
            <Button Style="{StaticResource MaterialDesignIconButton}">
                <materialDesign:PackIcon Kind="AddCircle"/>
            </Button>
        </StackPanel>

        <!--window control buttons-->
        <StackPanel Orientation="Horizontal" Grid.Column="1">
            <Button Style="{StaticResource MaterialDesignIconButton}" >
                <materialDesign:PackIcon Kind="WindowMinimize"/>
            </Button>

            <Button Style="{StaticResource MaterialDesignIconButton}" >
                <materialDesign:PackIcon Kind="WindowMaximize"/>
            </Button>

            <Button Style="{StaticResource MaterialDesignIconButton}" >
                <materialDesign:PackIcon Kind="WindowClose"/>
            </Button>
        </StackPanel>
    </Grid>

TitleWindowTap 的代码是如下的 userControl

<Border Margin="5 5 0  5"  BorderBrush="{DynamicResource SecondaryHueMidBrush}" BorderThickness="1" CornerRadius="10">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="auto"/>
            </Grid.ColumnDefinitions>
            <Button Style="{StaticResource MaterialDesignIconButton}" Grid.Column="1">
                <materialDesign:PackIcon Kind="WindowClose"/>
            </Button>
            <TextBlock x:Name="txtBlock" d:Text="very long title bla bls" VerticalAlignment="Center" Padding="5" FontSize="20" TextTrimming="CharacterEllipsis">
                    no title
            </TextBlock>
        </Grid>
    </Border>

问题

当我在窗口控件上添加一个新的点击（手动在 XML 中）时，如下所示

我的问题

如何自动调整此水龙头的大小以适应可用空间？

【问题讨论】：

标签： wpf xaml desktop-application titlebar

【解决方案1】：

我建议您使用 ItemsControl 及其 ItemTemplate 和 ItemsPanel。通过将 ItemsSource 绑定到 ObservableCollectionYourDataType>，您真正想要的效果很好。您很可能需要将“添加”按钮作为数据收集的一部分，但需要使用另一个 DataTemplate。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>
    <!--taps -->
    <DockPanel Grid.Column="0">
        <!--open taps-->
        <ItemsControl ItemsSource="{Binding Items}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <local:TitleWindowTap />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Rows="1" Columns="{Binding Items.Count}" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
        <!--add tap button-->
        <Button Style="{StaticResource MaterialDesignIconButton}" 
                Click="Button_Click">
            <materialDesign:PackIcon Kind="AddCircle"/>
        </Button>
    </DockPanel>

【讨论】：

【解决方案2】：

如果您希望水龙头自动调整大小，您应该去掉StackPanel 并使用实际调整其子级大小的Panel。例如，您可以为每个 TitleWindowTap 添加一个 ColumnDefinition：

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

    <!--open taps-->
    <local:TitleWindowTap  />
    <local:TitleWindowTap Grid.Column="1"  />
    <!--add tap button-->
    <Button Grid.Column="2" Style="{StaticResource MaterialDesignIconButton}">
        <materialDesign:PackIcon Kind="Circle"/>
    </Button>

    <!--window control buttons-->
    <StackPanel Orientation="Horizontal" Grid.Column="3">
        <Button Style="{StaticResource MaterialDesignIconButton}" >
            <materialDesign:PackIcon Kind="WindowMinimize"/>
        </Button>

        <Button Style="{StaticResource MaterialDesignIconButton}" >
            <materialDesign:PackIcon Kind="WindowMaximize"/>
        </Button>

        <Button Style="{StaticResource MaterialDesignIconButton}" >
            <materialDesign:PackIcon Kind="WindowClose"/>
        </Button>
    </StackPanel>
</Grid>

【讨论】：