CODEWITHSUNDEEP
c#wpfxamlwpf-controlswpfdatagrid
Kamil Kunt
Kamil Kunt

Reputation: 27

WPF Dockpanel width Stretch in xaml

I have a toolbox and want to make fill. But I dont make to this. İt is simple problem, I know that because I tried very hard but it did not.

<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

Upvotes: 1

Views: 2932

Answers (1)

tetralobita
tetralobita

Reputation: 455

You can simply use Grid with ColumnDefinitions

Width="*" means fills as much as area an item can, this is for your blue area

Width="Auto" means only fills area an item need so this is for your buttons

You can find more information by searching 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>

If you need more complex things to do, you can use this package https://github.com/sourcechord/GridExtra

Upvotes: 2

Related Questions