Constrain WPF element width inside its container - wpf

Question

I am placing a templated Button with some content in inside it (both Image and TextBlocks) in some other control's Grid:
<SomeControl>
<Grid>
<SpecialButton/>
</Grid>
</SomeControl>
<Style TargetType="{x:Type local:SpecialButton}">>
...
<Setter Property="Template">
<Setter.Value>
...
<TextBlock/>
<TextBlock/>
</Setter.Value>
</Style>
The "SomeControl" control's width is dynamic - that is - it can be dynamically changed according to the screen width, it's container width, etc. Hence I use another method to calculate the "SpecialButton"'s width.
As long as the TextBlock within the button is not wider then the button itself The "SpecialButton" is being perfectly matching its size to it's "SomeControl" container.
However, if the TextBlock's text is longer then the width of the "SpecialButton", the "SpecialButton" right border disappears and the button looks really bad. That being said, the "SpecialButton"'s width is still constained to its containers' width although drawing is not being well calculated.
I am trying to find a way to constain the TextBlock's (or even better the complete Grid's width) without defining an absoulte width, so the "SpecialButton" will still get drawn well and ignore it's children's overflow. Something like CSS's {overflow:hidden} would have been great...
Note:
I can't allow wrapping since the "SpecialButton" height is also constained (and manually calculated).

Answer 1

Width (and height) in WPF elements is pretty straightforward once you get used to it. Your grid, by default is set to Auto width, which means it will request 100% of the width of the parent.
Instead of setting a maximum size, I generally put items that I want dynamically sized and positioned in a grid and set grid row and column sizes. So if I want something to take up 1/3 of the available horizontal space, I can have a grid with two columns, one with width set to "1*" and the other set to "2*" (2/3 being twice the size of 1/3), and put my item in column 1 set to take up all available width.
In your case, the text needs to be truncated as it is doing its best to render all of the text, and is extending the button past the bounds of it's container to do it. There are two options for the built in trimming capability. TextTrimming="CharacterEllipsis" and TextTrimming="WordEllipsis" Just put that in your textblocks. I would put the textblocks in a container of some kind to keep them separate. If the first has content that is long enough, it may push the other completely off the side.
Element Sizing
<Window
x:Class="MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" DataContext="{Binding}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<local:SomeControl Margin="8,8,8,0"/>
</Grid>
</Window>
Text Trimming
<ControlTemplate x:Key="ButtonBaseControlTemplate1" TargetType="{x:Type ButtonBase}">
<Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding Button.IsDefaulted}" SnapsToDevicePixels="True" ThemeColor="Metallic">
<TextBlock Text="{TemplateBinding Content}" TextTrimming="WordEllipsis" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Microsoft_Windows_Themes:ButtonChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="RenderDefaulted" TargetName="Chrome" Value="True"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter Property="RenderPressed" TargetName="Chrome" Value="True"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Additionally, you might want to set the tooltip of your textboxes to the value of the text also. If the text is truncated and a user want to see what it is, they can mouse over the button and find out.