WPF - How to give priority to the second element of DockPanel-CodePudding

If have a DockPanel with two Border elements, first with HorizontalAlignment="Left" and second with HorizontalAlignment="Right". The width of entire DockPanel is fixed but widthes of Borders should be changed depending to its content. Both borders have TextBlockss. First TextBlock has word wrapping turned on the second is just one word. I want at first the second Border to be drawan and it should take all needed space and remaining space will be occupied by the first Border and it should use word wrapping to draw the content. This is my code which does not work because it first draws the first Border so no padding is left for the second one. Can you hint how to give priority to the second(right) element of DockPanel?

   <DockPanel>
   
        <Border Background="#FFFFFF" HorizontalAlignment="Left" CornerRadius="4 0 0 4" Height="48" MaxWidth="183">
            <ContentControl VerticalAlignment="Center">
                <ContentControl.Style>
                    <Style TargetType="ContentControl">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Mode}" Value="trial">
                                <Setter Property="Content">
                                    <Setter.Value>
                                        <WrapPanel Orientation="Horizontal" MaxWidth="190" VerticalAlignment="Center" HorizontalAlignment="Center">

                                            <TextBlock FontSize="12" TextWrapping="Wrap" Padding="11, 0, 11, 0">

                                            <Run Text="{Binding TrialText1, Mode=OneWay}"/>                                                   

                                            </TextBlock>

                                        </WrapPanel>
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ContentControl.Style>
            </ContentControl>
        </Border>

        <Border CornerRadius="0 4 4 0" HorizontalAlignment="Right" MaxWidth="104" MinWidth="83">
            <Border.Background>
                <SolidColorBrush Color="#FFFFFF" Opacity="0.4"/>
            </Border.Background>

            <ContentControl VerticalAlignment="Center">
                <ContentControl.Style>
                    <Style TargetType="ContentControl">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Mode}" Value="trial">
                                <Setter Property="Content">
                                    <Setter.Value>
                                        <WrapPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
                                            <TextBlock Text="{Binding PlanTitleText1}" FontSize="12" HorizontalAlignment="Center" 
                                        </WrapPanel>
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ContentControl.Style>
            </ContentControl>
        </Border>

    </DockPanel>

CodePudding user response：

You can use Grid instead. Define 2 Columns. Make the second one auto adjust how much space it needs and allow the first one to take all the remaining space.

<Grid>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="auto"/>
   </Grid.ColumnDefinitions>
   <Border Grid.Column="0" (...)>
      (...)
   </Border>
   <Border Grid.Column="1" (...)>
      (...)
   </Border>
</Grid>