Develop Reference

TextBlock not wrapping inside grid column windows phone

I've the following xaml definition. The textblock inside the stackpanel is not wrapping.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<toolkit:PhoneTextBox x:Name="NotesText" Grid.Row="0" Grid.ColumnSpan="2" Hint="Add Notes" AcceptsReturn="True" Height="290" VerticalScrollBarVisibility="Auto" TextWrapping="Wrap" />
<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="0" >
<CheckBox x:Name="showRequester" FontSize="{StaticResource PhoneFontSizeSmall}" HorizontalAlignment="Left" />
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Left" Text="option_show_to_requester" />
</StackPanel>
<CheckBox Grid.Row="1" Grid.Column="1" Content="Mail To Technicain" FontSize="{StaticResource PhoneFontSizeSmall}" HorizontalAlignment="Right" />
</Grid>
What I should do to make it wrap ? Thanks.
Update:
Problem with the alignment when using data template for check box content.

You can solve this by Providing Width of TextBlock.

You don't need to put a checkBox and a TextBlock into a StackPanel. To make the CheckBox's content Wrap, just use ContentTemplate of CheckBox.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<toolkit:PhoneTextBox x:Name="NotesText" Grid.Row="0" Grid.ColumnSpan="2" Hint="Add Notes" AcceptsReturn="True" Height="290" VerticalScrollBarVisibility="Auto" TextWrapping="Wrap" />
<!--Use ContentTemplate of CheckBox-->
<CheckBox Grid.Row="1" Grid.Column="0">
<CheckBox.ContentTemplate>
<DataTemplate>
<TextBlock Text="option_show_to_requester" TextWrapping="Wrap"/>
</DataTemplate>
</CheckBox.ContentTemplate>
</CheckBox>
<CheckBox Grid.Row="1" Grid.Column="1" Content="Mail To Technicain" FontSize="{StaticResource PhoneFontSizeSmall}" HorizontalAlignment="Right" />
</Grid>
for a simple example:
<Grid Grid.Row="1" x:Name="ContentRoot" Tapped="ContentRoot_Tapped">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<CheckBox Grid.Column="0">
<CheckBox.ContentTemplate>
<DataTemplate>
<TextBlock TextAlignment="Center" Text="wrap123123123123wrap" TextWrapping="Wrap"/>
</DataTemplate>
</CheckBox.ContentTemplate>
</CheckBox>
<CheckBox Grid.Column="1">
<CheckBox.ContentTemplate>
<DataTemplate>
<TextBlock Text="nowrap" TextWrapping="Wrap"/>
</DataTemplate>
</CheckBox.ContentTemplate>
</CheckBox>
</Grid>
And the run image is:

Can I get headers in a WPF grid getting its rows from a data template?

I am implementing a headered table using grids above each other, so I can specify columns headers. There is one grid for headers, and one grid for every row in the table. It is not very practical, header widths has to be specified twice. Maybe I instead can have a ListView/DataGrid without all styling?
How can I get rid of this multi Grid approach?
Here is what I got:
<StackPanel Orientation="Vertical">
<Grid Margin="0, 10, 0, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="header 1" />
<TextBlock Grid.Column="1" Grid.Row="0"
Text="header 2" />
</Grid>
<ItemsControl ItemsSource="{Binding Entities}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Grid Margin="0, 10, 0, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="{Binding Property1}" />
<TextBlock Grid.Column="1" Grid.Row="0"
Text="{Binding Property2}" />
</Grid>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>

You can use Grid.IsSharedSizeScope attached property
<StackPanel Orientation="Vertical" Grid.IsSharedSizeScope="True">
<Grid Margin="0, 10, 0, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="First" Width="40" />
<ColumnDefinition SharedSizeGroup="Second" Width="70" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="header 1" />
<TextBlock Grid.Column="1" Grid.Row="0"
Text="header 2" />
</Grid>
<ItemsControl ItemsSource="{Binding Entities}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Grid Margin="0, 10, 0, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="First" />
<ColumnDefinition SharedSizeGroup="Second" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0"
Text="{Binding Property1}" />
<TextBlock Grid.Column="1" Grid.Row="0"
Text="{Binding Property2}" />
</Grid>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>

No Scrollbar appearing for WrapGrid in Windows 8 application

I currently have a WrapGrid bound to an ObservableCollection of BitmapImages. What I wish is for these to be displayed, 4 items per row, extending downwards - and when the WrapGrid extends past the size of the users screen, allow the user to scroll downwards. Currently it is working - but no scrollbar appears and the user is unable to scroll downwards - so whenever it extends beyond the screen, the images are cut off and useless.
I believe something must be incorrect in how I have defined my grids ; but for the life of me I cannot figure out what I have done incorrectly after hours of searching.
Here is my code :
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="backButton"
Click="GoBack"
IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
Style="{StaticResource BackButtonStyle}" />
<TextBlock x:Name="pageTitle"
Grid.Column="1"
Text="Image Gallery"
Style="{StaticResource PageHeaderTextStyle}" />
</Grid>
<Grid Grid.Row="1" Grid.Column="1">
<Grid Margin="120,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="60" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
...
<ItemsControl Name="listOfImages" ItemsSource="{Binding Path=Images}" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="5" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="5" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Stretch="Fill" Width="200" Height="200" Source="{Binding}" Margin="10,10,10,0" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="5" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</Grid>

I thought this stuff was set by default but may not be the case, so this may prove useful.
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal"
CanVerticallyScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Auto" />
</ItemsPanelTemplate>

How to use SharedSizeScope between 2 wpf controls with parent child relation?

I have a scenario where i have one control, which is using another control thru ListBox.ItemTemplate. I need to share Height and width between these 2 controls. How can we achieve that?
Main Conrol Xaml looks like as followings:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Text="{Binding Path=Caption,
Mode=OneWay}" />
<TextBlock Grid.Row="1"
Text="{Binding Path=Caption2,
Mode=OneWay}" />
</Grid>
<ListBox Grid.Row="0"
Grid.Column="1"
ItemsSource="{Binding Path=ViewModels}">
<ListBox.ItemTemplate>
<DataTemplate>
<Views:View2 />
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
View2 xaml looks like as following:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="{Binding Path=Value,
Mode=OneWay}"/>
<TextBlock Text="{Binding Path=Value2,
Mode=OneWay}"
Grid.Row="1"
Grid.Column="0"
/>
</Grid>

You can synchronize row height and column width using Grid.IsSharedSizeScope and the SharedSizeGroup attribute on ColumnDefinition and RowDefinition.
I'm not sure which elements you need to synchronize in your Xaml, but an example might be as follows:
Ia a parent element you use Grid.IsSharedSizeScope="True"
<Grid IsSharedSizeScope="true">
..
</Grid>
This synchronizes any columns (or rows) that have the same SharedSizeGroup within that scope (you can have multiple nested scopes).
So if your view.xaml looks like this
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="column1"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Path=Value, Mode=OneWay}"/>
<TextBlock Text="{Binding Path=Value2, Mode=OneWay}" Grid.Row="1" Grid.Column="0"/>
</Grid>
Then all the textblocks will have the same width.

How do I have ListBox items fill the entire space?

Hi I see there have been many questions about ListBox and filling the entire space for the DataTemplate but I still cannot get anything to work. What I have is a ListBox and the DataTemplate has a UserControl. How do I get my UserControl to stretch the data to fill the space?
MainWindow XAML snippet:
<ListBox x:Name="ConfiguredItemsList">
<ListBox.ItemTemplate>
<DataTemplate>
<local:ConfiguredItem DataContext="{Binding}" HorizontalContentAlignment="Stretch" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
UserControl XAML snippet:
<UserControl.Resources>
<local:ImagePathConverter x:Key="ImagePathConverter"/>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="75" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" x:Name="NameLabel" Text="Name:" />
<TextBlock Grid.Row="0" Grid.Column="1" x:Name="tbName" Text="{Binding Path=Name}" />
<TextBlock Grid.Row="1" Grid.Column="0" x:Name="DescriptionLabel" Text="Description: " />
<TextBlock Grid.Row="1" Grid.Column="1" x:Name="Description" Text="{Binding Path=Description}" />
<TextBlock Grid.Row="2" Grid.Column="0" x:Name="TimeLabel" Text="Time:" />
<TextBlock Grid.Row="2" Grid.Column="1" x:Name="Time" Text="{Binding Path=ChangeTime, StringFormat={}{0:h:mm tt}}" />
</Grid>
<Border Grid.Column="1" BorderThickness="1" BorderBrush="Black">
<Image Source="{Binding Path=WallpaperInfo, Converter={StaticResource ImagePathConverter}}" />
</Border>
</Grid>

Have you tried to set HorizontalContentAlignment to stretch on list box level?
<ListBox x:Name="ConfiguredItemsList" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<local:ConfiguredItem DataContext="{Binding}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Note: I have set HorizontalContentAlignment property of ListBox instead of Item.