Xaml中的WPF Dockpanel宽度拉伸答案

【问题标题】：WPF Dockpanel width Stretch in xamlXaml中的WPF Dockpanel宽度拉伸
【发布时间】：2018-05-09 04:52:55
【问题描述】：

我有一个工具箱，想进行填充。但我不这样做。这是一个简单的问题，我知道因为我很努力但没有成功。

<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="1" Grid.Row="0">


            <DockPanel Height="40"  HorizontalAlignment="Stretch" Background="#eaeaea" LastChildFill="True">

                <StackPanel  HorizontalAlignment="Stretch" DockPanel.Dock="Left" Orientation="Vertical">

                    <Border BorderThickness="1" BorderBrush="#eaeaea" CornerRadius="10" Padding="2" VerticalAlignment="Stretch" >

                        <Grid Width="auto" HorizontalAlignment="Stretch" >

                            <Border Name="mask" Background="#eaeaea" CornerRadius="6,0,0,6" HorizontalAlignment="Stretch" />

                        <StackPanel Height="30" Margin="2,2,2,2" Name="kucukmenu" HorizontalAlignment="Stretch" Width="auto">

                                <StackPanel.OpacityMask>
                                    <VisualBrush Visual="{Binding ElementName=mask}"/>
                                </StackPanel.OpacityMask>


                            </StackPanel>

                        </Grid>

                    </Border>

            </StackPanel>

                <StackPanel Height="40" Orientation="Horizontal"  HorizontalAlignment="Right" DockPanel.Dock="Right">
                    <Button Style="{DynamicResource systembtn}">
                        <Image  Source="images/icons/settings.png" HorizontalAlignment="Right"/>
                    </Button>
                    <Button Style="{DynamicResource systembtn}">
                        <Image  Source="images/icons/minimize.png" HorizontalAlignment="Right" />
                    </Button>
                    <Button Style="{DynamicResource systembtn}">
                        <Image   Source="images/icons/cancel.png" HorizontalAlignment="Right"/>
                    </Button>
                </StackPanel>
            </DockPanel>

    </StackPanel>

Now it looks like this

I want to this

【问题讨论】：

标签： c# wpf xaml wpf-controls wpfdatagrid

【解决方案1】：

您可以简单地将Grid 与ColumnDefinitions 一起使用

Width="*" 表示尽可能多地填充一个项目，这是你的蓝色区域

Width="Auto" 表示仅填充项目需要的区域，因此这是您的按钮

您可以通过搜索xaml grid找到更多信息

<Grid Height="40">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <DockPanel Grid.Column="0" Width="100">
        <StackPanel HorizontalAlignment="Stretch" DockPanel.Dock="Left" Orientation="Vertical">
            <StackPanel.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <LinearGradientBrush.RelativeTransform>
                        <TransformGroup>
                            <ScaleTransform CenterY="0.5" CenterX="0.5" />
                            <SkewTransform CenterY="0.5" CenterX="0.5" />
                            <RotateTransform Angle="90" CenterY="0.5" CenterX="0.5" />
                            <TranslateTransform />
                        </TransformGroup>
                    </LinearGradientBrush.RelativeTransform>
                    <GradientStop Color="#FFBFC5E2" Offset="0" />
                    <GradientStop Color="#FF123CF5" Offset="1" />
                </LinearGradientBrush>
            </StackPanel.Background>
        </StackPanel>
    </DockPanel>
    <Button Grid.Column="1" Content="btn 1" />
    <Button Grid.Column="2" Content="btn 2" />
    <Button Grid.Column="3" Content="btn 3" />
</Grid>

如果你需要做更复杂的事情，你可以使用这个包https://github.com/sourcechord/GridExtra

【讨论】：