Develop Reference

MaterialDesignThemes ComboBox Selected Item template issue

I'm working on styling a WPF ComboBox so that the ComboBoxItems have some additional data. The items look great when in the drop down, but once selected, the displayed item is not stretched/filling the ComboBox- it's all smushed to the left. I've done enough digging to figure out this is related to the MaterialDesign Theme being applied to the control. Without MeterialDesign being referenced in a demo project, the code works as anticipated.
<ComboBox Width="150"
Margin="2"
HorizontalContentAlignment="Stretch" <!-- No Effect //-->
materialDesign:HintAssist.Hint="Select Item"
ItemsSource="{StaticResource ExampleItems}" >
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding DisplayText}" />
<Ellipse Grid.Column="1" Width="10" Height="10" Fill="{Binding Color}"/>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
<!-- No Effect //-->
<!--<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem" BasedOn="{StaticResource MaterialDesignComboBoxItemStyle}">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ComboBox.ItemContainerStyle>-->
</ComboBox>
I've tried pretty much everything I can without luck- Including various controls inside the DataTemplate, stack panel, dock panel, etc....
I've created a minimum reproducible example here: ComboBoxDemo Project
I've included the ComboBox Style I pulled from Blend, to try to dig into what MaterialDesign is doing on top of the normal template. I see that there is an ItemContainerStyle for the selected item, but it looks like it's binding the HorizontialContentAlignment up the chain. Manually setting that to Stretch did not help.
So Hopefully a Xaml guru out there can pinpoint the issue...

Modify ListView ItemTemplate at runtime

I have a ListView:
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="90" HorizontalAlignment="Stretch" Background="Gray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="1.2*"/>
<ColumnDefinition x:Name="changeThis" Width="140"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="45"/>
</Grid.ColumnDefinitions>
...
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
When the screen orientation changes to Portrait I would like the 3rd (140px wide) column to disappear, so the other columns stay properly visible. I use VisualStateManager to manage the orientation change, but I get an exception if I try to change the "changeThis" ColumnDefinition to 0. And strangely I cannot access "changeThis" ColumnDefinition from the code behind. It is a Windows Store App.

Sadly, the x:Name is local to the item template and cannot be accessed from outside.
Possible Solutions are:
1: Bind the Width to a Property.
{Binding DataContext.MyColumnWidth, ElementName=LayoutRoot}
2: Use an ItemTemplateSelector with different Templates for Orientations.

Dynamically toggle visibility of WPF grid column from C# code

My problem is: I can't find out how to toggle the visibility of my WPF grid column. Assume following XAML markup:
<Grid x:Name="myGrid">
<Grid.RowDefinitions>
<RowDefinition x:Name="Row1" />
<RowDefinition x:Name="Row2" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Column1" />
<ColumnDefinition x:Name="Column2" />
</Grid.ColumnDefinitions>
</Grid>
Aferwards the grid is filled with some controls etc. Now I want to hide a single column dynamically out of my C# code. I've tried achieving this by setting the the column's definition width to zero, e.g. Column1.Width = 0. This works, but I don't really like this solution - is there really no better way?
I'm looking for something like myGrid.Columns[0].Visibility = COLLAPSED or Column1.Visibility = HIDDEN. I just can't find something like that - any ideas?

<ColumnDefinition>
<ColumnDefinition.Style>
<Style TargetType="ColumnDefinition">
<Setter Property="Width" Value="*" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsColumnVisible}" Value="False">
<Setter Property="Width" Value="0" />
</DataTrigger>
</Style.Triggers>
</Style>
</ColumnDefinition.Style>
</ColumnDefinition>
Please do implement INotifyPropertyChanged in your ViewModel

The simplest way to do this is to add a named Grid as the top level control in the relevant column that you want to hide. Then you can just hide it and all of its contents as you would any other control:
In XAML:
<Grid x:Name="myGrid">
<Grid.RowDefinitions>
<RowDefinition x:Name="Row1" />
<RowDefinition x:Name="Row2" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Column1" />
<ColumnDefinition x:Name="Column2" />
</Grid.ColumnDefinitions>
<Grid x:Name="GridColumn1" Grid.Column="1">
...
</Grid>
</Grid>
Then in code behind:
GridColumn1.Visibility = Visibility.Collapsed;
As you have more than one row in your Grid, you may want to rearrange them like this:
<Grid x:Name="myGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Column1" />
<ColumnDefinition x:Name="Column2" />
</Grid.ColumnDefinitions>
<Grid x:Name="GridColumn0" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
</Grid>
<Grid x:Name="GridColumn1" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
</Grid>
</Grid>
UPDATE >>>
It is not really necessary to rearrange the main Grid like this... you could just as easily add two Grid controls, one in each row of the relevant column and then set the Visibility of them both together:
InnerGrid1.Visibility = InnerGrid2.Visibility = Visibility.Collapsed;
You could even add a Grid into each cell of the main Grid and have full control over which cells are visible at any one time.

In WPF Grid Column and Row Hiding on Code Project, they show a way using dependency properties. They set Visible = false, but internally, it sets Width = 0.
Another idea is to delete the column definition in code behind... But I guess it's an even worse hack! :(

An ugly hack would be to just change the width to 0 (out of sight, out of mind).
There are many reasons why you shouldn't do this but, based upon your situation, it may suffice!

Use following to Hide the grid. Similarly you can hide the row definitions and column definitions using Name property.
myGrid.Visibility = System.Windows.Visibility.Hidden;

inter related stack panel sizing

I have a recursively defined user control that needs the following properties:
there are two columns
the first contains a single border around some text
the second column contains a stack of these same type of controls (the recursive part)
if the box in the first column is shorter than the total height of the stacked boxes in the second column, the box should expand to make both columns the same height.
If the total height of the second column is shorter than the box in the first column, then the last item in the second column's stack should expand so they are the same height.
so for example, it might look like this:
Ok, so far what I have done is create a horizontal stack panel where the first item is a dock-panel containing a border and text... the second column is a vertical stack panel bound to a sublist, creating the recursive user control... like this..
<StackPanel Orientation="Horizontal" Background="AliceBlue">
<local:TMRequirementView Requirement="{Binding Baseline}" />
<StackPanel Orientation="Vertical">
<ItemsControl ItemsSource="{Binding Requirements}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:TMGridView Baseline="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
Where the requirement looks like this:
<DockPanel>
<Border MinHeight="50"
BorderBrush="Black" BorderThickness="2">
<TextBlock Text="{Binding Description}"
TextWrapping="Wrap" Background="Transparent" Height="Auto" />
</Border>
</DockPanel>
Now this works great if the stacked column is taller, but it doesn't work if the first column is taller, and I get gaps. Any idea how to handle this mutual height dependency?
Update:
So by adding a border around the right columns stack panel, I was able to see that the stackpanel actually did receive the min-height changes. However, even though there was room to expand, the children of the stack panel didn't automatically update. If I fix the minheight of the stack panel before hand to something large, the children fill up. What I need to figure out is how to update the chidren's height based on changes to the stack panel's min-height.

I think the Grid in this layout does what you describe. I put it in a DockPanel so that you can see how it resizes. Try typing stuff into the text boxes and watch how it behaves:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DockPanel>
<Grid DockPanel.Dock="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox AcceptsReturn="True" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"></TextBox>
<TextBox AcceptsReturn="True" Grid.Row="0" Grid.Column="1"></TextBox>
<TextBox AcceptsReturn="True" Grid.Row="1" Grid.Column="1"></TextBox>
<TextBox AcceptsReturn="True" Grid.Row="2" Grid.Column="1"></TextBox>
</Grid>
<TextBlock/>
</DockPanel>
</Page>
All three rows of the Grid will have the height of a TextBox at a minimum (when you replace the TextBoxes with other elements, you'll need to set minimum heights to keep them from vanishing if they're empty). Since the third row is star-sized, it will size itself to all remaining vertical space left after the first two rows are arranged. So if there's a bunch of content in the first column, the third row in the second column gets taller.
Edit
Actually, there's no reason to even screw around with a Grid in this case: What you're describing is really the behavior of the DockPanel:
<DockPanel>
<DockPanel DockPanel.Dock="Top">
<DockPanel.Resources>
<Style TargetType="Label">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Background" Value="Lavender"/>
<Setter Property="Margin" Value="1"/>
</Style>
</DockPanel.Resources>
<DockPanel LastChildFill="True">
<Label>Foo</Label>
</DockPanel>
<DockPanel LastChildFill="True">
<Label>Foo</Label>
<Label>Bar</Label>
<Label>Baz</Label>
<Label>Bat</Label>
</DockPanel>
</DockPanel>
<Label/>
</DockPanel>

How to have a control fill all available space

I have a xaml code:
<Grid>
<WrapPanel>
<TextBox ></TextBox>
<Button Content="GetIt" />
</WrapPanel>
</Grid>
How i can to get all available space for textBox?
i want to do something like that:
|[____________________][GetIt]|

There are a number of ways this can be achieved, including this one:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox />
<Button Grid.Column="1">GetIt</Button>
</Grid>

Try this:
<Grid>
<TextBox HorizontalAlignment="Stretch" Margin="2,2,102,2"></TextBox>
<Button HorizontalAlignment="Right" Width="100" Content="GetIt" />
</Grid>
Just make the button the desired width and the text box will fill up the rest.
Thanks for the catch; corrected above to properly handle margin on right. This does, however, require you to update the margin when the button width changes. Two columns is a better solution if you plan to change the spacing often. Using the margin is cleaner if you have several controls in the grid and don't want to create nested grids to handle this kind of split.

The simplest way is to use a DockPanel instead of a Grid (the default for LastChildFill is true but I also added it here for clarity):
<DockPanel LastChildFill="True">
<Button Content="GetIt" DockPanel.Dock="Right" />
<TextBox ></TextBox>
</DockPanel>

Here's a way to achieve the layout that you're looking for:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Style TargetType="TextBox">
<Setter Property="Margin" Value="2"/>
</Style>
</Page.Resources>
<DockPanel>
<DockPanel DockPanel.Dock="Top">
<!-- Because the Button is fixed in size, you can divide the row it's
in using a DockPanel: the Button is docked to the right edge, and the
TextBox fills up the remaining available space. -->
<Button Margin="2" Padding="2" DockPanel.Dock="Right">GetIt</Button>
<TextBox />
</DockPanel>
<!-- Because the TextBoxes *aren't* fixed in size, you can't use docking,
as it won't size them. So put them in a Grid and use star sizing to
divide the grid's vertical space into two equal parts. The Grid will
fill up the remainder of the (outer) DockPanel. -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0">Another TextBox</TextBox>
<TextBox Grid.Row="1">Yet another TextBox</TextBox>
</Grid>
</DockPanel>
</Page>