Search code examples
wpfxamldesktop-applicationtitlebar

how to auto resize of childerin in horizontal stackPanel WPF

I try to build a title bare like Google Chrome title bar in WPF

I made the following enter image description here

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

and the code for the TitleWindowTap is a userControl as following

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

problem

when I add a new tap (manually in XML) it over the window controls like the following enter image description here

My question

how to auto resize this taps to fit the available space ?

Solution

  • If you want the taps to be auto-resized you should get rid of the StackPanel and use a Panel that actually resizes its children. You could for example add a ColumnDefinition per TitleWindowTap:

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