Develop Reference

How to use a Grid inside a WPF ItemControl

I've a WPF page where I need to display things in a form of a grid.
I've a number row that are dynamic and I will have different template depending on the type of object.
I've tried to put my headers in grid with SharedSIzeGroup specified, and then having each of my item in an individual grid with the same SharedSizeGroup name.
It doesn't seems to work, my header and each values are not shared at all :(
<StackPanel Orientation="Vertical">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="B"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="C"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="D"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="E"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="F"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Title1" FontWeight="Bold" />
<TextBlock Grid.Column="1" Text="Title2" FontWeight="Bold" />
<TextBlock Grid.Column="2" Text="Title3" FontWeight="Bold" />
<TextBlock Grid.Column="3" Text="Title4" FontWeight="Bold" />
<TextBlock Grid.Column="4" Text="Title5" FontWeight="Bold" />
</Grid>
<ItemsControl ItemsSource="{Binding LoggingRule.MachineStateLogging}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="B"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="C"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="D"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="E"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="F"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Some text" Grid.Column="0"/>
<TextBlock Text="Some text" Grid.Column="1"/>
<TextBlock Text="Some text" Grid.Column="2"/>
<TextBlock Text="Some text" Grid.Column="3"/>
<TextBlock Text="Some text" Grid.Column="4"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
Is this something possible?

How to create a rounded first and last viewcell in ListView Xamarin Forms?

I want to create a ListView mentioned in the picture below. The problem is that I don't want to create a full rounded ListView. I just want a rectangle shape ListView Header and the rounded first and last ViewCell? Can anyone tell me how to do that?

You can use this type
<ListView x:Name="lstView"
BackgroundColor="White"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="0,10,0,15">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="10" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Column="1" Source="{Binding Image}" />
<StackLayout Grid.Column="2" Orientation="Vertical">
<Label Text="{Binding Title}" TextColor="#f36e22" />
<Label Text="{Binding Text}" TextColor="Black" />
</StackLayout>
<Image Grid.Column="3" Source="{Binding smallImage}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

StackPanel inside Grid - how to put its elements in different columns

Here's my code:
<Grid x:Name="SourceGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Headers" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="Tags" />
<ItemsControl Grid.Row="1" Grid.ColumnSpan="2" ItemsSource="{Binding Path=AllHeaders.Fields}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}" />
<ComboBox ItemsSource="{Binding ElementName=SourceGrid, Path=DataContext.Tags}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
As you can see, I have a TextBlock and a ComboBox inside of a DataTemplate, which is inside of a StackPanel. What I want to do is put TextBlock in Column=0 of my grid, and a ComboBox into Column=1 of my grid. How can I do that? Grid.Column property is inaccessible in both TextBlock and ComboBox.

this is your new layout:
<Grid x:Name="SourceGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="Headers" />
<TextBlock Grid.Row="0"
Grid.Column="1"
Text="Tags" />
<ItemsControl Grid.Row="1"
Grid.ColumnSpan="2"
ItemsSource="{Binding Path=AllHeaders.Fields}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="SourceGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding}"
Grid.Column="0" />
<ComboBox ItemsSource="{Binding Path=DataContext.Tags, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Grid},AncestorLevel=2}}"
Grid.Column="1" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
or
<Grid x:Name="SourceGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="Headers" />
<TextBlock Grid.Row="0"
Grid.Column="1"
Text="Tags" />
<ItemsControl Grid.Row="1"
Grid.ColumnSpan="2"
ItemsSource="{Binding Path=AllHeaders.Fields}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="SourceGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding}"
Grid.Column="0" />
<ComboBox ItemsSource="{Binding Path=DataContext.Tags, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ItemsControl}}}"
Grid.Column="1" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>

Stretching Grid inside another Grid

How can i stretch horizontally "SecondGrid"?
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Content="Left" Grid.Column="0" />
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC"/>
<Label Content="Righkk" Grid.Column="2" Margin="5,0,-5,0" />
<Grid Name="SecondGrid" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<GridSplitter
ResizeDirection="Rows"
Grid.Row="1"
Width="Auto"
Height="3"
Background="#FFBCBCBC"
HorizontalAlignment="Stretch"
/>
<ListBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"/>
<WebBrowser Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Label Content="Right" Grid.Row="2" />
</Grid>
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ToolBarTray DockPanel.Dock="Top">
<ToolBar>
<Button Command="New" Content="New" />
<Button Command="Open" Content="Open" />
<Button Command="Save" Content="Save" />
</ToolBar>
</ToolBarTray>
<TreeView>
<TreeViewItem Header="Level 1" IsExpanded="True">
<TreeViewItem Header="Level 2.1" />
<TreeViewItem Header="Level 2.2" IsExpanded="True">
<TreeViewItem Header="Level 3.1" />
<TreeViewItem Header="Level 3.2" />
</TreeViewItem>
<TreeViewItem Header="Level 2.3" />
</TreeViewItem>
</TreeView>
</StackPanel>
</Grid>

i just had to remove
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

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>