WPF Dockpanel寬度以xaml表示

Question

我有一個工具箱，想要填寫。 但是我沒有做到這一點。 這是一個簡單的問題，我知道這是因為我非常努力，但事實並非如此。

<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>

現在看起來像這樣

我要這個

Answer 1

您可以將Grid與ColumnDefinitions一起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