Display dynamic width of container in WPF - wpf

Question

<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="0.55*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" Background="Gray">
<TextBlock x:Name="EmployeeNameTextBlock"
VerticalAlignment="Center"
Margin="50,0,0,0"
FontSize="18"
RenderTransformOrigin="0.5,0.5"
Text="Content09asdfadsdsdasdfasd92168132 "
TextWrapping="NoWrap"
/>
<ToggleButton x:Name="btn"
HorizontalAlignment="Left"
Margin="0,0,0,0"
VerticalAlignment="Center"
Height="30"
Width="30" >
Button
</ToggleButton>
</StackPanel>
<Label Grid.Column="1" Background="Yellow" />
</Grid>
This is my code i have issue in displaying the toggle button, you can refer to screen shot below for currently displaying and expectation
conditions
* button should be always end of the text block even content is small or big
* if content is bigger then container, textbox size should stop at before less width of button. so that we can see toggle button on display. as shown in expected screen shot.
Result Screenshot long text
Result Screenshot small text
Expected screenshot long text
Expected Screenshot small text
Please any one help on this
Thanks in advance
Solution
<Grid SizeChanged="Grid_SizeChanged">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="0.55*" />
</Grid.ColumnDefinitions>
<Border Name="rightBlk" Background="Green" Grid.Column="1" />
<Grid VerticalAlignment="Center" Background="Gray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="EmployeeNameTextBlock"
VerticalAlignment="Center"
Margin="50,0,0,0"
TextTrimming="CharacterEllipsis"
FontSize="18"
RenderTransformOrigin="0.5,0.5"
Text="Content09asasdfasdfd "
TextWrapping="NoWrap"
Padding="0,0,30,0"
/>
<ToggleButton x:Name="btn"
HorizontalAlignment="Right"
Margin="0,0,0,0"
VerticalAlignment="Center"
Height="30"
Width="30" >
Button
</ToggleButton>
</Grid>
<Label Grid.Column="1" Background="Yellow" />
</Grid>
Code Behide
private void Grid_SizeChanged(object sender, SizeChangedEventArgs e)
{
EmployeeNameTextBlock.MaxWidth = ((Grid)sender).ActualWidth - 50 - rightBlk.ActualWidth;
}
Thank you #lvan and #Neptune for helping me to solve this issue.

Answer 1

You can replace the StackPanel with a Grid. This way you have more control on distribution and can give your Button priority to get its width first before allocating the remaining to the TextBlock:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="0.55*" />
</Grid.ColumnDefinitions>
<Grid VerticalAlignment="Center" Background="Gray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="EmployeeNameTextBlock"
VerticalAlignment="Center"
Margin="50,0,0,0"
TextTrimming="CharacterEllipsis"
FontSize="18"
RenderTransformOrigin="0.5,0.5"
Text="Content09asdfadsdsdasdfasd92168132 "
TextWrapping="NoWrap"
/>
<ToggleButton x:Name="btn" Grid.Column="1"
HorizontalAlignment="Left"
Margin="0,0,0,0"
VerticalAlignment="Center"
Height="30"
Width="30" >
Button
</ToggleButton>
</Grid>
<Label Grid.Column="1" Background="Yellow" />
</Grid>
I added an attribute TextTrimming if you want to indicate to user there's missing text but you can remove it if that's not needed.
The code above produces this result when the width is limited:

Answer 2

You can get what you are looking for with either you code and adding
MaxWidth="270" and TextTrimming="CharacterEllipsis" to textbox
or Neptunes code and changing
<ColumnDefinition Width="*" /> to "Auto" and also adding MaxWidth="270" to textbox.
I don't think you can do it without setting a MaxWidth on the textbox but that means you'll have to recalculate it if you resize your window.
To recalculate:
Subscribe to main window size changed event:
SizeChanged += MainWindow_SizeChanged; within main window constructor or in xaml
And add to codebehind:
private void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
{
EmployeeNameTextBlock.MaxWidth = StackPanelName.ActualWidth - btn.ActualWidth;
}
You might need to use .Width instead of Actual width, and you can also try using the column instead of the stack panel but this illustrates the recalculation you need to do.