Develop Reference

Align controls correctly when using ItemsControl in WPF

Can someone tell me how to align and resize controls correctly when using the ItemsControl.
I want to have a description on the left and a TextBox on the right for multiple fields which are defined in an ObservableCollection to end up with something like:
First Name: [FirstNameTextBox]
Last Name: [LastNameTextBox]
Date of Birth: [DobTextBox]
but instead I'm getting this:
First Name: [FirstNameTextBox]
Last Name: [LastNameTextBox]
Date of Birth: [DobTextBox]
I want all the textbox to be aligned based on the largest <TextBlock>. If this was done directly in a <Grid> control, it would be straight forward as all controls are directly in the grid and you would just have the following columns definition defined
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
I thought I could use the SharedSizeGroup property in the <Grid> but it still doesn't resize correctly. Instead it only displays the <TextBlock> stretch across the <Grid>.
Here's my code:
<Grid Grid.IsSharedSizeScope="True" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Labels" />
<ColumnDefinition Width="*" SharedSizeGroup="InputControls" />
</Grid.ColumnDefinitions>
<ItemsControl Grid.Row="1" ItemsSource="{Binding SelectedTemplate.Fields}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Labels"/>
<ColumnDefinition SharedSizeGroup="InputControls"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=Label}" Grid.Column="0" Margin="5"
VerticalAlignment="Center" Background="Red" />
<TextBox Text="{Binding Path=Value}" Grid.Column="1" Margin="5"
VerticalAlignment="Center" Background="Blue" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
Any idea how I can resolve this?
Thanks.
UPDATE1: I cannot get this to work as I need it to. This is what I've got so far:
<Grid Grid.Row="1" Background="Purple">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" SharedSizeGroup="Overall" />
</Grid.ColumnDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Labels" Width="Auto" />
<ColumnDefinition SharedSizeGroup="InputControls" Width="*" />
</Grid.ColumnDefinitions>
<ItemsControl ItemsSource="{Binding SelectedTemplate.Fields}"
Background="Yellow"
Grid.IsSharedSizeScope="True">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Background="Green">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Labels"/>
<ColumnDefinition SharedSizeGroup="InputControls"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=Label}"
Grid.Column="0"
Margin="5"
VerticalAlignment="Center"/>
<TextBox Text="{Binding Path=Name}"
Grid.Column="1"
Margin="5"
VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
This ends up displaying my layout this way:
As you can see, my TextBox are correctly aligned based on the largest TextBlock but my ItemsControls is not stretched all the way across. I guess that makes sense as it is within the same grid where the ColumnDefinitions are defined.
Now, if I move the ColumnDefinitions' out this grid to the outer grid and remove all instances ofGrid.IsSharedSizeScope`, I guess the following:
Which once again is closer to what I need as my ItemsControl is now stretching all the way as I've set its Grid.ColumnSpan="2" and my TextBox are still aligned to the TextBlock and are stretching all the way across but the problem now is that the TextBlock should be smaller as the Column is set to Auto but they appear to behave as if the column was set to * and I guess I'm losing the purpose of using IsSharedSizeScope since it has been removed.
Now if I add IsSharedSizeScope="True" to the outer grid, I get the following result:
Again, this is close to what I want as my ItemsControl is stretched, my textboxes are also stretch but they are no longer aligned to the largest TextBlock.
Finally, if I add Grid.IsSharedSizeScope="True" to ItemsControl as originally suggested by #mm8,
<Grid Grid.Row="1" Background="Purple" Grid.IsSharedSizeScope="True">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Labels" Width="Auto" />
<ColumnDefinition SharedSizeGroup="InputControls" Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.ColumnSpan="2" >
<ItemsControl ItemsSource="{Binding SelectedTemplate.Fields}"
Background="Yellow"
Grid.IsSharedSizeScope="True">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Background="Green">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Labels"/>
<ColumnDefinition SharedSizeGroup="InputControls"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=Label}"
Grid.Column="0"
Margin="5"
VerticalAlignment="Center"/>
<TextBox Text="{Binding Path=Name}"
Grid.Column="1"
Margin="5"
VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
<!--<TextBlock Text="Invoice Number" Grid.Column="0" Margin="5" VerticalAlignment="Center"/>
<TextBox Text="InvoiceNumber" Grid.Column="1" Margin="5" VerticalAlignment="Center"/>-->
</Grid>
I get the following:
Which brings me back to square one, though the definitions are different?
I need to achieve the following:
What am I doing wrong??
Thanks.

Try to set the Grid.IsSharedSizeScope property of the ItemsControl itself:
<ItemsControl Grid.Row="1" ItemsSource="{Binding SelectedBarcodeTemplate.Fields}"
Grid.IsSharedSizeScope="True">
Synchronizing the width of elements in an ItemsControl: https://joshsmithonwpf.wordpress.com/2008/09/06/synchronizing-the-width-of-elements-in-an-itemscontrol/

I eventually found the answer in the following article: WPF Tutorial - Grid Panel under the section: "How to share the width of a column over multiple grids".
As per article:
Columns and rows that participate in size-sharing do not respect Star sizing. In the size-sharing scenario, Star sizing is treated as Auto. Since TextWrapping on TextBlocks within an SharedSize column does not work you can exclude your last column from the shared size. This often helps to resolve the problem.
So my final XAML looks like this:
<Grid Grid.Row="1" Background="Purple" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Labels" Width="Auto" />
<ColumnDefinition SharedSizeGroup="InputControls" Width="*" />
</Grid.ColumnDefinitions>
</Grid>
<ItemsControl ItemsSource="{Binding SelectedBarcodeTemplate.Fields}"
Background="Yellow"
Grid.IsSharedSizeScope="True">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Background="Green" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Labels"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=Label}"
Grid.Column="0"
Margin="5"
VerticalAlignment="Center"/>
<TextBox Text="{Binding Path=Name}"
Grid.Column="1"
Margin="5"
VerticalAlignment="Center"
HorizontalAlignment="Stretch"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
And the outcome now finally looks correct:
Hope this helps others!

ScrollViewer is not working with grid columns

I have this built and I add text boxes to it programmatically and update after each addition but the scrollViewer never becomes scrollable just grayed out arrows. I'm only adding textBoxes to one of the stackPanels, could that be it? If so is there some work around for that? I'd appreciate any help, I've spent much too long on this silly problem.
<ScrollViewer x:Name="scrollViewerMain" VerticalScrollBarVisibility ="Visible" HorizontalAlignment="Center" Height="368" Width="410" VerticalAlignment="Top" Margin="150,309,150,-35.5">
<Grid HorizontalAlignment="Left" Height="368" VerticalAlignment="Center" Width="410" ScrollViewer.CanContentScroll="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel x:Name="stackPanelPlayerNames" Grid.Column="0" Height="368"/>
<StackPanel x:Name="stackPanelWins" Grid.Column="4" Height="368"/>
<StackPanel x:Name="stackPanelHours" Grid.Column="5" Height="368"/>
<StackPanel x:Name="stackPanelKills" Grid.Column="1" Height="368"/>
<StackPanel x:Name="stackPanelDeaths" Grid.Column="2" Height="368"/>
<StackPanel x:Name="stackPanelRatio" Grid.Column="3" Height="368"/>
</Grid>
</ScrollViewer>

Your Grid should not have a fixed height. If your Grid (inside your ScrollViewer) is ALWAYS 368 pixels tall, and that your ScrollViewer is bigger than 368 pixels tall, then there is always no overflow.

Height image by heights textblock

I have image and 3 textblock. I want place image left and 3 TextBlock in rows right. I've tried this:
<Grid x:Name="Grid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.RowSpan="3"
Source="image.jpg" Stretch="Uniform" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Grid.Column="1"
Text="11"
FontSize="25"/>
<TextBlock Grid.Column="1"
Grid.Row="1"
Text="22"/>
<TextBlock Grid.Column="1"
Grid.Row="2"
Text="33" FontSize="14"/>
</Grid>
But I have large space between rows when image is big. How I can do this?

If you want the image to remain its size... simply get rid of the grid rows and throw the TextBlocks into a vertical StackPanel.
If you want to resize your image so that it has the same height as the 3 TextBlocks... you can bind the Height of the Image to the ActualHeight of whatever container you put the TextBlocks in, like this:
<Grid x:Name="Grid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Height="{Binding ActualHeight, ElementName=myStackPanel}" Source="image.jpg" Stretch="Uniform" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<StackPanel Grid.Column="1">
<StackPanel Name="myStackPanel">
<TextBlock Text="11" FontSize="25"/>
<TextBlock Text="22"/>
<TextBlock Text="33" FontSize="14"/>
</StackPanel>
</StackPanel>
</Grid>

I would try to make a grid with 1 row and 2 columns.
In the first column i would place the image.
In the second column i would place a stack panel with vertical flow.
Then add the textblocks to the stackpanel.

Use scroll bars on child controls in wpf

I have an explorer type window that I am trying to display in WPF.
<Grid ScrollViewer.VerticalScrollBarVisibility="Disabled">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="350" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<telerik:RadTreeView Grid.Column="0" Name="ExplorerTree"
ScrollViewer.VerticalScrollBarVisibility="Visible"/>
<GridSplitter Grid.Column="1" Grid.Row="1" Width="1" Grid.RowSpan="1" HorizontalAlignment="Center" VerticalAlignment="Stretch"/>
<telerik:RadListBox Grid.Column="2" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Visible" />
</Grid>
However, when I expand an object within the tree view, the scroll bar appears on the grid causing the entire window to scroll rather than just the contents of the tree view. What do I need to change to make the contents of the tree view scroll instead? I don't want to set it to a specific height as I would like the height of the tree view to adjust with the height of the parent in which it is displayed.

If you just stop trying to set ScrollViewer properties altogether you should get the desired result as both RadTreeView and RadListBox will display a ScrollViewer automatically as needed (unless you have something else in the rest of your XAML that interferes with their normal behavior). I used both these controls extensively without setting any ScrollViewer properties in XAML and that's what they do automatically although you might have to set their VerticalAlignment to stretch... not sure about that.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="350" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<telerik:RadTreeView Grid.Column="0" Name="ExplorerTree"
VerticalAlignment="Stretch"/>
<GridSplitter Grid.Column="1" Grid.Row="1" Width="1" Grid.RowSpan="1"
HorizontalAlignment="Center" VerticalAlignment="Stretch"/>
<telerik:RadListBox Grid.Column="2" Grid.Row="1" VerticalAlignment="Stretch" />
</Grid>

How to make WPF Grid expandable?

Please, let's focus on the horizontal size (width).
I have horizontal StackPanel which auto-resizes to occupy entires space (it "expands"). Within it I have Grid (with 3 columns) and a scrollbar. The scrollbar width should be fixed, but Grid should expand. How can I force it to do it?
Current code:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Grid Name="grid1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="2"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" HorizontalAlignment="Stretch">
<Label Content="Label" HorizontalAlignment="Center" Name="label1" VerticalAlignment="Bottom" />
</StackPanel>
<GridSplitter DragCompleted="OnDragCompleted" ShowsPreview="True" Name="gridsplitter1" Background="Red" Grid.Column="1" Grid.Row="0" Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<StackPanel Orientation="Vertical" Grid.Column="2" HorizontalAlignment="Stretch">
<Label Content="Label" HorizontalAlignment="Center" Name="label2" VerticalAlignment="Bottom" />
</StackPanel>
</Grid>
<ScrollBar Name="scrollBarV" Orientation="Vertical" />
</StackPanel>
No matter what I do, width=auto, horizontalalignment=strech, every time each column of the grid occupies only the required space (sufficient for showing its content), not entire space available.

A horizontal StackPanel will always give its children their desired width, so it will never force the Grid to be larger than it wants to be. You will need to use a different kind of panel. One option is to use a DockPanel, and dock the ScrollBar to the right and let the Grid fill in the rest:
<DockPanel HorizontalAlignment="Stretch">
<ScrollBar DockPanel.Dock="Right" Name="scrollBarV" Orientation="Vertical" />
<Grid Name="grid1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
...
</Grid>
</DockPanel>
Another option is to use a Grid with the second column using Auto to size to the ScrollBar exactly and the first column left at the default of 1* to use the rest of the space:
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Name="grid1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
...
</Grid>
<ScrollBar Grid.Column="1" Name="scrollBarV" Orientation="Vertical" />
</Grid>

Try
<ColumnDefinition Width="*"></ColumnDefinition>
Columns and rows that are defined within a Grid can take advantage of Star sizing to distribute remaining space proportionally. When Star is selected as the height or width of a row or column, that column or row receives a weighted proportion of the remaining available space. This is in contrast to Auto, which distributes space evenly based on the size of the content that is within a column or row. This value is expressed as * or 2* when you use Extensible Application Markup Language (XAML)
Source