PivotItem can't scroll down... Anyone has any ideas as to how I can remedy this?
For whatever the reason just won't scroll down when content that is bound inside the listbox is longer than the height of the page. I tried adding a grid inside the pivotitem with height set to auto, but to no avail.
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<controls:Pivot Height="Auto">
<controls:PivotItem Header="Main Information">
<Border CornerRadius="10" Background="#FF5C7590" Height="Auto" Padding="2" BorderThickness="1">
<ListBox x:Name="lbxPropertyItems">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Margin="5, 0, 0, 0" Grid.Column="0" Text="{Binding Label}" />
<TextBlock Grid.Column="1" Text="{Binding Value}" TextWrapping="Wrap" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
</controls:PivotItem>
</controls:Pivot>
</Grid>
Thanks for any advice.
The issue is that a StackPanel has an infinite layout space in which ever orientation it is set, so the ScrollViewer included in the ListBox never gets activated in that direction. The best way to handle it is to host it inside a Grid control with row or column definitions.
Related
I have user controls that contains datagrid.
My status bar disappears as soon as grid populates even though I have enough margins and there's empty space at the bottom. What am i doing wrong????
<DockPanel VerticalAlignment="Stretch" LastChildFill="False">
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top" Margin="0,0,0,0">
<controls:ucXXXXSummary x:Name="ucSummary" Margin="20,20,20,30" Height="Auto" Width="Auto"/>
<controls:XXXXUC x:Name="ucXXXX" Margin="20,20,20,30" Height="Auto" Width="Auto"/>
</StackPanel>
<StatusBar DockPanel.Dock="Bottom" Height="25">
<StatusBarItem>
<StatusBarItem>
<TextBlock Name="lblStatus" Text="abc!!!!!!!!!!!"/>
</StatusBarItem>
</StatusBarItem>
</StatusBar>
</DockPanel>
Don't rely on margins to position elements relative to each other. Use an appropriate Panel such as for example a Grid:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<controls:ucXXXXSummary x:Name="ucSummary" Margin="20,20,20,30" />
<controls:XXXXUC Grid.Row="1" x:Name="ucXXXX" Margin="20,20,20,30" />
<StatusBar Grid.Row="2" Height="25">
<StatusBarItem>
<StatusBarItem>
<TextBlock Name="lblStatus" Text="abc!!!!!!!!!!!"/>
</StatusBarItem>
</StatusBarItem>
</StatusBar>
</Grid>
StackPanels don't play well with scrollable content: Horizontal scroll for stackpanel doesn't work
I was working on a UserControl in a View, when I came across this problem:
I set my content grids row heights to be 2*, 1* and 1* with the lines in between set to auto.
Now. The uppermost row has a grid nested in with a TextBlock and a TextBox. The height of the cell is in no way 2*. It looks like it would look if I had set it to auto. I'm pretty sure the other 2 content rows (containing buttons) are the right height either.
Now I hope you guys can help me fix this. I've googled around a bit and I can't seem to find a fitting solution.
Here's the code:
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Name="TBCustomerTitle" Margin="0,0,8,0" FontWeight="Bold"
Visibility="{Binding SetVisibility, UpdateSourceTrigger=PropertyChanged}">Customer:</TextBlock>
<TextBox Name="TBCustomerData" Grid.Column="1"
Visibility="{Binding SetVisibility, UpdateSourceTrigger=PropertyChanged}"
Text="{Binding DisplayedCustomer.Name, UpdateSourceTrigger=PropertyChanged}"></TextBox>
</Grid>
<Line Grid.Row="1" Style="{StaticResource horizontalLineStyle}" />
<StackPanel Grid.Row="2" Orientation="Vertical">
<Button Command="{Binding AddCommand}">Add a new customer</Button>
<Button Command="{Binding UpdateCommand}">Update the selected customer</Button>
<Button Command="{Binding DeleteCommand}">Delete the selected customer</Button>
</StackPanel>
<Line Grid.Row="3" Style="{StaticResource horizontalLineStyle}" />
<StackPanel Grid.Row="4" Orientation="Vertical">
<Button Command="{Binding RefreshCommand}">Refresh the list</Button>
<Button Command="{Binding ClearSelectionCommand}">Clear selection</Button>
</StackPanel>
</Grid>
EDIT: Now with screenshot, as requested. It's the right column I'm talking about (So yes, this UserControl is in itself another nested Grid)
EDIT 2: Here's the containing code. My page consist of three classess.
The 1st (ApplicationView.xaml) is a Window. It has the navigation buttons in the left column, a nice line, and one column containing the view of that specific object. It has no rows.
ApplicationView.xaml
<Grid>
<Grid.Resources>
<ResourceDictionary Source="StylesRD.xaml" />
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="6*" />
</Grid.ColumnDefinitions>
<!-- A DockPanel for the Navigation Buttons-->
<DockPanel Grid.Column="0" Margin="0,20" VerticalAlignment="Top" HorizontalAlignment="Center">
<ItemsControl ItemsSource="{Binding PageViewModels}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Name}"
Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
CommandParameter="{Binding }"
Margin="2,5"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DockPanel>
<Line Grid.Column="1" Style="{StaticResource verticalLineStyle}" />
<ContentControl Grid.Column="2" Content="{Binding CurrentPageViewModel}" />
</Grid>
The view (CustomerView.xaml) is the 2nd file. It is a User control and it also has 3 columns, one with the list of Customers in this case, one for the beautiful seperating line (it is beautiful, right? /sarcasm) and the one I'm struggling with right now with the details and the buttons to do stuff.
Here also no rows.
CustomerView.xaml
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<!-- Customer list -->
<view:CustomerListView Grid.Column="0" VerticalAlignment="Top"/>
<Line Grid.Column="1" Style="{StaticResource verticalLineStyle}" />
<!-- Details -->
<view:CustomerDetailsView Grid.Column="2" VerticalAlignment="Top"/>
</Grid>
Your inner Grid has two RowDefinitions without a height setting. Therefore the default Height="*" will be used for both rows. Your inner grid doesn't need two RowDefinitions, so removing them should fix your issue. So your inner grid definition should look like this:
<Grid>
<!--
remove these row definitions
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Name="TBCustomerTitle" Margin="0,0,8,0" FontWeight="Bold"
Visibility="{Binding SetVisibility, UpdateSourceTrigger=PropertyChanged}">Customer:</TextBlock>
<TextBox Name="TBCustomerData" Grid.Column="1"
Visibility="{Binding SetVisibility, UpdateSourceTrigger=PropertyChanged}"
Text="{Binding DisplayedCustomer.Name, UpdateSourceTrigger=PropertyChanged}"></TextBox>
</Grid>
Edit:
It works for me as expected. The TextBox and TextBlock get stretched to 2* height, and the two StackPanels have a height of 1* each. Please provide the XAML where you use your user control. Seems like there lies the problem.
Edit 2:
Ah, now I see it. The VerticalAlignment="Top" setting in your CustomerView.xaml pushes your CustomerDetailsView to the top. Either remove this attribute or set the VerticalAlignment to Stretch.
The xaml you provided is working fine, the problem is in the containing xaml. Look at this example xaml.
<StackPanel Orientation="Horizontal">
<Border Background="Yellow">
<local:MyUserControl/>
</Border>
<StackPanel Background="Green">
<local:MyUserControl/>
</StackPanel>
</StackPanel>
And the usercontrol (stripped away bindings and styles)
<UserControl x:Class="WpfApplication3.MyUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApplication3"
mc:Ignorable="d">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Name="TBCustomerTitle" Margin="0,0,8,0" FontWeight="Bold" >Customer:</TextBlock>
<TextBox Name="TBCustomerData" Grid.Column="1" Text="{Binding DisplayedCustomer.Name, UpdateSourceTrigger=PropertyChanged}"></TextBox>
</Grid>
<Line Grid.Row="1" Height="5"/>
<StackPanel Grid.Row="2" Orientation="Vertical">
<Button Command="{Binding AddCommand}">Add a new customer</Button>
<Button Command="{Binding UpdateCommand}">Update the selected customer</Button>
<Button Command="{Binding DeleteCommand}">Delete the selected customer</Button>
</StackPanel>
<Line Grid.Row="3" Height="5"/>
<StackPanel Grid.Row="4" Orientation="Vertical">
<Button Command="{Binding RefreshCommand}">Refresh the list</Button>
<Button Command="{Binding ClearSelectionCommand}">Clear selection</Button>
</StackPanel>
</Grid>
</UserControl>
As you can see the usercontrol located in the stackpanel is not stretching because stackpanel does not stretch it's contents.
I can't figure out why the contents of my TextBox is affecting my grid column widths. I have setup a grid with 3 columns with widths defined as 50, *, 50, as shown below
Now, when in use, the center column will grow/shrink as the text in the TextBox changes, see the 2 examples below. The actual TextBox is not changing size, so I can't understand why in the world the grid is changing. The Grid is inside of a Border inside a UserControl. The UserControl is used as a DataTemplate in a ListBox.
Edit: I've discovered that this issue is related to the UserControl being in a ListBox, see example image below (UserControl in ListBox (circled in red) vs. UserControl Placed on Form (circed in blue). The grid behaves as expected when the UserControl is placed directly on the form. Code for the form is given below.
UserControl XAML:
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="Name:" Margin="2" />
<TextBox Grid.Column="1" Margin="2" Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" Grid.ColumnSpan="2" />
<TextBlock Text="Shift:" Grid.Row="1" Margin="2" />
<TextBox Grid.Column="1" Grid.Row="1" Margin="2" Text="{Binding TimeShift, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, FallbackValue=0}" HorizontalContentAlignment="Right" />
<TextBlock Text="s" Grid.Row="1" Grid.Column="2" Margin="2" />
</Grid>
Window/Form XAML:
<Window x:Class="CrashSimOffice.FileImport"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:CrashSimOffice"
Title="File Import" Height="350" Width="450" Background="White" Icon="/CrashSimOffice;component/Images/16/page-white-save.png">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="75"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button Content="Add" Margin="2" Command="{Binding AddFileCommand}" />
<Button Content="Remove" Grid.Column="1" Margin="2" Command="{Binding RemoveFileCommand}" />
<ListBox HorizontalContentAlignment="Stretch" Grid.ColumnSpan="4" Margin="2" Grid.Row="1" ItemsSource="{Binding Files}" SelectedItem="{Binding CurrentFile}" ScrollViewer.CanContentScroll="False" Background="WhiteSmoke">
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type local:FileViewModel}">
<local:FileView DataContext="{Binding}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Content="Done" Grid.Column="3" Margin="2" Grid.Row="2" Click="Button_Click" />
<local:FileView Grid.Row="3" Grid.ColumnSpan="4" />
</Grid>
OK, I figured it out, Bruno V you got me thinking it must have something to do with the ListBox. I needed to add this to my ListBox:
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Not sure why that works, but it does.
I have a Window with a Grid inside:
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="70" />
<RowDefinition Height="*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<ContentControl Grid.Row="0" Content="{Binding ChildViewModel.View}" />
<DockPanel Grid.Row="1" Visibility="{Binding SearchResultViewVisibility}">
<GridSplitter DockPanel.Dock="Top" Background="LightGray" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Top" IsTabStop="False"/>
<Views:SearchResultView DataContext="{Binding SearchResultViewModel}" />
</DockPanel>
<UserControls:GradientBackgroundControl Grid.Row="2" Height="25">
<Validators:FocusSummaryControl x:Name="FocusSummary" ValidateOnlyFocusedElement="False" />
</UserControls:GradientBackgroundControl>
</Grid>
The ContentControl gets a UserControl with this Grid set:
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Row="0" Grid.ColumnSpan="4">
<StackPanel>
...
</StackPanel>
</ScrollViewer>
The problem now is, that the ScrollViewer in the UserControl doesn't scroll. The content of the UserControl set to the ContentControl is heigher and the overflow ist just hidden.
If I am not wrong, StackPanel requires a Height to be set for scroll functionality to work because StackPanel, by design, grows in one direction (based on Orientation).
To confirm whether this is the cause of your problem, please test by setting the height of StackPanel to a fixed height. Alternately, you may want to replace the StackPanel with say DockPanel and see the behaviour. Also there is a ScrollViewer.CanContentScroll property that you may want to fiddle with.
Let us know the result of this test.
I think you need to rearrange things a little bit. My suggestions (I'm sure there are infinite variations that would work):
First, add a new row to your grid (Height="Auto") and set the height of your top row (with your ContentControl in it) to "*"
<Grid.RowDefinitions>
<RowDefinition Height="*" MinHeight="70" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
Second, move your GridSplitter out of the DockPanel. Put the splitter in row 1 and the dockpanel in row 2.
<ContentControl Grid.Row="0" Content="{Binding ChildViewModel.View}" />
<GridSplitter Grid.Row="1" Background="LightGray" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Top" IsTabStop="False" ResizeBehavior="PreviousAndNext"/>
<DockPanel Grid.Row="2" Visibility="{Binding SearchResultViewVisibility}">
<Views:SearchResultView DataContext="{Binding SearchResultViewModel}" />
</DockPanel>
Note that you'll probably also have to set the ResizeBehavior for your GridSplitter as shown above. I hope this will get you close to what you want.
I have two objects: Bicycle and BicycleFullSuspension, which inherits Bicycle and contains additional properties (strings and decimals). I managed to make a functioning DataTemplateSelector that will choose either my LbxItemTemplateBicycle DataTemplate or my LbxItemTemplateFullSuspension DataTemplate, depending on to which class the object in an ObservableCollection belongs. Both of these templates are bound to the parent template ListBoxItemTemplate.
I am trying to display information about each object in a ListBox, and each of the inheriting templates should add a few more fields to the grid in the parent DataTemplate. My problem is that I cannot figure out how to add WPF elements to the grid in ListBoxItemTemplate from one of the inherited templates. I cannot assign a key to the grid in the template, so I am not sure how to specify that additional TextBlocks should end up in the same grid that is in the parent template. (Right now, additional TextBlocks are stacked on top of the parent grid.)
<DataTemplate x:Key="ListBoxItemTemplate">
<Border Name="LbxItemTemplate" BorderBrush="DarkRed" BorderThickness="2" Padding="5" Margin="5">
<Grid>
<Grid.RowDefinitions>
...
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
...
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Bike Year:" />
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding BikeYear}" />
<TextBlock Grid.Row="2" Grid.Column="0" Text="Bike Color: "/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding BikeColor}"/>
...
</Grid>
</Border>
</DataTemplate>
<DataTemplate x:Key="LbxItemTemplateFullSuspension" DataType="{x:Type app:BicycleFullSuspension}">
<Grid>
<ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource ListBoxItemTemplate}" />
<TextBlock Grid.Row="6" Grid.Column="0" Text="Shock Travel"/>
<TextBlock Grid.Row="6" Grid.Column="1" Text="{Binding ShockTravel}"/>
</Grid>
</DataTemplate>
I found these links helpful for getting to this point:
http://dariosantarelli.wordpress.com/2011/07/28/wpf-inheritance-and-datatemplates/
http://zamjad.wordpress.com/2009/12/31/applying-data-template-conditionally/
Is there a way to use data-template inheritance in WPF?
Edit:
I'm not sure why I didn't think to put the Border on the template inheriting the base, but by nesting a StackPanel inside of the Border in the inheriting template (StackPanel contains the ContentPresenter with the base template content along with the Grid that has the added information), everything lines up very nicely:
Working solution, using input from XAMeLi:
<DataTemplate x:Key="ListBoxItemTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
...
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" SharedSizeGroup="LabelColumnGroup" />
<ColumnDefinition Width="150" SharedSizeGroup="LabelColumnGroup" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Bike Year:" />
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding BikeYear}" />
...
</Grid>
</DataTemplate>
<DataTemplate x:Key="LbxItemTemplateFullSuspension" DataType="{x:Type app:BicycleFullSuspension}" >
<Border BorderBrush="DarkRed" BorderThickness="2" Padding="5" Margin="5" Grid.IsSharedSizeScope="True" Width="500">
<StackPanel>
<ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource ListBoxItemTemplate}" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
...
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="LabelColumnGroup" />
<ColumnDefinition Width="Auto" SharedSizeGroup="LabelColumnGroup" />
</Grid.ColumnDefinitions>
...
<TextBlock Grid.Row="7" Grid.Column="0" Text="Shock Type: "/>
<TextBlock Grid.Row="7" Grid.Column="1" Text="{Binding ShockType}"/>
...
</Grid>
</StackPanel>
</Border>
</DataTemplate>
You cannot add UIElemets to a data template, but you can layout the bigger template to look like it has added text to the base template.
Basically, you are on the right path, only the layout of the big template is corrupt. (Too bad you omitted the structure of your rows and columns)
Try this:
<DataTemplate x:Key="ListBoxItemTemplate">
<Border Name="LbxItemTemplate" BorderBrush="DarkRed" BorderThickness="2" Padding="5" Margin="5">
<Grid>
<Grid.RowDefinitions>
...
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
SharedSizeGroup="LabelGroupColumn"/>
...
</Grid.ColumnDefinitions>
....
</Border>
</DataTemplate>
<DataTemplate x:Key="LbxItemTemplateFullSuspension">
<Grid Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/><!--This will hold the default template-->
<!--From here define the same structure as in the default template, if you have rows for margins and such-->
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
SharedSizeGroup="LabelGroupColumn"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource ListBoxItemTemplate}" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="Shock Travel"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding ShockTravel}"/>
</Grid>
</DataTemplate>
It seems that your grids have Label-Value structures and you want all the values to start from the same vertical line (this is very good from UX point of view). Notice the SharedSizeGroup setters on column definitions and the Grid.IsSharedSizeScope="True" on a mutual parent. This will keep the width of the label column to be synchronized among the grids.