I have a working GridView with a grouped items.
<GridView x:Name="ItemsGridView"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectionMode="None" ItemClick="ItemsGridView_ItemClick" IsItemClickEnabled="True">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Width="400" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="title" Text="{Binding Name}" TextWrapping="NoWrap" Grid.ColumnSpan="1" Grid.Column="0" Padding="5,0,0,0" HorizontalAlignment="Left"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Border Width="130" Background="{StaticResource CommonBlueBackground}" >
<TextBlock TextWrapping="Wrap" Text="{Binding Key}" Style="{StaticResource GroupHeader}" Margin="0"/>
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
Each group looks like this.
But I want it to look like this.
How do I style each group to have a line on the left hand side as pictured?
The groups in a GridView aren't actual controls, but rather a collection of item containers and header controls laid out in the ItemsPanel as you can see below.
The easiest solution would be to put a line on the left side of each item through updates to ItemContainerStyle.
Related
I gave a ListBox that lists items. The items, can vary in size, but follow the same pattern:
picture................Metadata
ID
<ListBox Name="View" Grid.Row="2" ItemsSource="{Binding Human, ElementName=uc}"
SelectedItem="{Binding SelectedHuman, ElementName=uc}"
MouseDoubleClick="OnSubjectEditClick"
VerticalContentAlignment="Center"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.ScrollUnit="Pixel"
ScrollViewer.CanContentScroll="True"
Grid.IsSharedSizeScope="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate >
<DataTemplate >
<Border BorderBrush="#565656" BorderThickness="1" Margin="10" Padding="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="300" />
<RowDefinition MaxHeight="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" MinWidth="300" MaxWidth="500" SharedSizeGroup="col1"/>
<ColumnDefinition MaxWidth="500" Width="*" SharedSizeGroup="col2"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" MaxHeight="300" MaxWidth="300" Source="{Binding Thumb}"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Name}" FontWeight="Bold" TextAlignment="Center"/>
<local:MetadataView Grid.Column="1" Grid.RowSpan="2" Metadata="{Binding Metadata}" HorizontalAlignment="Stretch" VerticalAlignment="Center" IsEdit="False" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The items inside Metadata .xaml looks like this. StackPanels containing actual Metadata are automatically generated by code inside "DisplayMode":
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
...........
<StackPanel/> //AutoGenerated
............
</StackPanel>
</ScrollViewer>
</Grid>
The problem I'm facing is the fact, that I need to be able to select an item inside the ListBox. But, by adding ScrollViewer in Metadata.xaml it seems I Reroute the selector, so it is trying to select an item in Metadata ScrollViewer instead of ListBox when I press the part of the ListBox containing Metadata. If I press on Thumbnail, or even RightClick on any part of the ListBox - it seems to select just fine.
[SOLVED] After playing around with available options in ScrollViewer I stumbled across Focusable. Setting it to False did the trick.
I hope it will help someone in the future.
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" Focusable="False" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
</StackPanel>
</ScrollViewer>
</Grid>
I have a page with 2 columns
Each column has controls contained in stackpanels
The stackpanel is contained in a boarder.
border
stackpanel
.....
gridview
/stackpanel
/boarder
I want the boarder to fill the vertical height without setting the minheight to a pixel value.
Meaning I do not want the boarder to grow and shrink with the gridview, it should stay the same size, filling the colunm and respecting its margins.
<StackPanel x:Name="RightColumn"
Grid.Column="1"
Margin="10,20,20,20">
<TextBlock FontWeight="Bold" Text="Tags" />
<Border BorderBrush="{StaticResource DGreen}"
MinHeight="500"
BorderThickness="2"
Padding="10">
<StackPanel >
<TextBox Width="120"
HorizontalAlignment="Left"
KeyDown="{x:Bind ViewModel.AddNewTag}"
PlaceholderText="Add New Tag"
Text="{x:Bind ViewModel.NewTagToAdd, Mode=TwoWay}" />
<TextBlock Margin="0,10,0,0"
FontWeight="Bold"
Text="Add Tags from this list" />
<GridView Margin="0,10,0,0" MaxHeight="416" VerticalAlignment="Stretch"
ItemsSource="{x:Bind ViewModel.SD.TagsAvailableForSelecting}"
SelectionChanged="{x:Bind ViewModel.AddTagToSelectedTags, Mode=OneWay}">
<GridView.ItemTemplate>
<DataTemplate x:DataType="dat:TagDTO">
<Border Width="90" Background="{StaticResource DGreen}">
<TextBlock Margin="3"
Foreground="{StaticResource ContrastColorBrush}"
Text="{x:Bind TagName}" />
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</StackPanel>
</Border>
</StackPanel>
Change your First StackPanel to Grid. so that It can fill the complete available space. TextBox will go to first Row which is set as Auto and Second Border should go to Second Row which is set as *.
Below is a mockup from your example.
<Grid x:Name="RightColumn"
Grid.Column="1"
Margin="10,20,20,20">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock FontWeight="Bold" Text="Tags" Grid.Row="0" />
<Border BorderBrush="{StaticResource DGreen}" Grid.Row="1"
MinHeight="500" BorderThickness="2" Padding="10">
<StackPanel>
<TextBox Width="120"
HorizontalAlignment="Left"
KeyDown="{x:Bind ViewModel.AddNewTag}"
PlaceholderText="Add New Tag"
Text="{x:Bind ViewModel.NewTagToAdd, Mode=TwoWay}" />
<TextBlock Margin="0,10,0,0"
FontWeight="Bold"
Text="Add Tags from this list" />
<GridView Margin="0,10,0,0" MaxHeight="416" VerticalAlignment="Stretch"
ItemsSource="{x:Bind ViewModel.SD.TagsAvailableForSelecting}"
SelectionChanged="{x:Bind ViewModel.AddTagToSelectedTags, Mode=OneWay}">
<GridView.ItemTemplate>
<DataTemplate x:DataType="dat:TagDTO">
<Border Width="90" Background="{StaticResource DGreen}">
<TextBlock Margin="3"
Foreground="{StaticResource ContrastColorBrush}"
Text="{x:Bind TagName}" />
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</StackPanel>
</Border>
</Grid>
I am facing the problem with dragging(DragItemsStarting) the item from GridView ,item pressed does not gets selected for dragging and could not drag the item in WindowsPhone 8.1.
Please find the tried code to dag the Grid view item.
<GridView AllowDrop="True" CanDragItems="True" CanReorderItems="True" ItemsSource="{Binding Items}" SelectionMode="Single"
DragItemsStarting="gridview_DragItemsStarting" Drop="schedule_Drop" Grid.Row="2" x:Name="gridview" BorderThickness="1" BorderBrush="LightGray">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<GridViewItem>
<GridViewItem.Template>
<ControlTemplate>
<Border Margin="10,20,0,0" Height="70" Width="100" BorderBrush="LightGray" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.3*"/>
<RowDefinition Height="0.7*"/>
</Grid.RowDefinitions>
<TextBlock Margin="1" Text="Hi" Grid.Row="0" Foreground="#FF25A0DA" FontSize="10"/>
<TextBlock Margin="1" Text="Forum" Grid.Row="1" Foreground="Gray" TextWrapping="Wrap" FontSize="10"/>
</Grid>
</Border>
</ControlTemplate>
</GridViewItem.Template>
</GridViewItem>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
Pease share Suggestion to resolve this.
Regards,
Jeyasri M
You should set the ReorderMode property to enable reordering of gridviewitems. And also in the itemtemplate of the gridview you are creating a gridviewitem inside the gridviewitemtemplate.
Have you data template as below:
<GridView.ItemTemplate>
<DataTemplate>
<Border Margin="10,20,0,0" Height="70" Width="100" BorderBrush="LightGray" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.3*"/>
<RowDefinition Height="0.7*"/>
</Grid.RowDefinitions>
<TextBlock Margin="1" Text="Hi" Grid.Row="0" Foreground="#FF25A0DA" FontSize="10"/>
<TextBlock Margin="1" Text="Forum" Grid.Row="1" Foreground="Gray" TextWrapping="Wrap" FontSize="10"/>
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
Below is the DataTemplate for GridView. I just change GridView to ListView
I want to do this:
2 or more columns in DataTemplate for the ListView to display
a) 2 columns Text
or
b) 2 columns Image in Square Box like 300 x 200.
How to I design the DataTemplate for ListView?
Thanks
1) DataTemplate declare in ResourceDictionary for Gridview. Can use this for ListView?
<DataTemplate x:Key="CustomerTemplate">
<Grid Background="Blue" Width="300" Height="200">
<Grid.RowDefinitions>
<RowDefinition Height="75"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Name}"
Grid.Row="0"
Margin="20,10,0,0"
TextWrapping="Wrap"
VerticalAlignment="Top"
FontSize="24"
FontWeight="SemiBold"/>
<TextBlock Text="{Binding No}"
Grid.Row="1"
Margin="20,0,0,0"
VerticalAlignment="Center"
FontSize="18"/>
<TextBlock Text="{Binding Contact}"
Grid.Row="2"
Margin="20,0,0,0"
VerticalAlignment="Center"
FontSize="18"/>
<TextBlock Text="{Binding Address}"
Grid.Row="3"
Margin="20,0,0,0"
VerticalAlignment="Top"
FontSize="18"/>
<TextBlock Text="{Binding Id}"
Grid.Row="3"
Margin="200,0,0,0"
VerticalAlignment="Top"
FontSize="18"/>
</Grid>
</DataTemplate>
-- Use the DataTemplate for ListView.
What need to do for the DataTemplate?
<ListView x:Name="CustomersGridView"
Grid.Row="1"
Foreground="White"
SelectionMode="None"
IsSwipeEnabled="True"
IsItemClickEnabled="True"
ItemsSource="{Binding Mode=OneWay, Source={StaticResource CustomersViewSource}}"
ItemTemplate="{StaticResource CustomerTemplate}"
ItemClick="CustomersGridView_ItemClick"
SelectionChanged="CustomersGridView_SelectionChanged">
</ListView>
Just add an outer grid and add 2 more columns to that.
<Grid Width="900">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- FIRST COLUMN -->
<Grid Background="Blue" Width="300" Height="200" Grid.Column="0" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="75"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Name}"
Grid.Row="0"
Margin="20,10,0,0"
TextWrapping="Wrap"
VerticalAlignment="Top"
FontSize="24"
FontWeight="SemiBold"/>
<TextBlock Text="{Binding No}"
Grid.Row="1"
Margin="20,0,0,0"
VerticalAlignment="Center"
FontSize="18"/>
<TextBlock Text="{Binding Contact}"
Grid.Row="2"
Margin="20,0,0,0"
VerticalAlignment="Center"
FontSize="18"/>
<TextBlock Text="{Binding Address}"
Grid.Row="3"
Margin="20,0,0,0"
VerticalAlignment="Top"
FontSize="18"/>
<TextBlock Text="{Binding Id}"
Grid.Row="3"
Margin="200,0,0,0"
VerticalAlignment="Top"
FontSize="18"/>
</Grid>
<!-- SECOND COLUMN -->
<Grid Grid.Column="1"></Grid>
<!-- THIRD COLUMN -->
<Grid Grid.Column="2"></Grid>
</Grid>
Why don't you use a GridView with some adjustments to the internal ScrollViewer of the GridView? like making it vertically scrollable and allowing it to have 3 items per row. By doing so, you can just keep the data template to hold just single item. Here is the sample for that:
<GridView ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollMode="Enabled">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid MaximumRowsOrColumns="3" Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
Following code I had. I am using a Listbox using binding. Below the list box I have a button for submit. Able to scroll Listbox items only unable to scroll the button. Button is available at the bottom of the screen(not List). I want this button at the bottom of the Listbox?.
<ScrollViewer VerticalScrollBarVisibility="Visible" Height="780" MaxHeight="1800" VerticalAlignment="Top">
<ScrollViewer.Content>
<Grid Grid.Row="0" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListBox Name="formDetails" ItemsSource="{Binding}" Grid.Row="0" Height="780" MaxHeight="1800">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="Text">
<TextBlock Name="Txt_Question"
Text="{Binding Question, Mode=OneWay}"/>
<TextBox Name="TxTAnswer"
Text="{Binding Stringval, Mode=TwoWay}"
Visibility="{Binding DataType, Mode=OneWay, Converter={StaticResource TextConverter}}"/>
<CheckBox Name="BoolVal"
IsChecked="{Binding BoolVal, Mode=TwoWay}"
Visibility="{Binding DataType, Mode=OneWay, Converter={StaticResource YesNoConverter}}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Grid.Row="1" Click="Button_Click" Content="Submit"/>
</Grid>
</ScrollViewer.Content>
</ScrollViewer>
Try this for button at the bottom of the Listbox:
<ScrollViewer VerticalScrollBarVisibility="Visible" VerticalAlignment="Top">
<StackPanel>
<ListBox Name="formDetails" ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="Text">
<TextBlock Name="Txt_Question"
Text="{Binding Question, Mode=OneWay}"/>
<TextBox Name="TxTAnswer"
Text="{Binding Stringval, Mode=TwoWay}"
Visibility="{Binding DataType, Mode=OneWay, Converter={StaticResource TextConverter}}"/>
<CheckBox Name="BoolVal"
IsChecked="{Binding BoolVal, Mode=TwoWay}"
Visibility="{Binding DataType, Mode=OneWay, Converter={StaticResource YesNoConverter}}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Click="Button_Click" Content="Submit"></Button>
</StackPanel>
</ScrollViewer>
for button at the bottom of the page
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Visible" VerticalAlignment="Top">
<StackPanel>
<ListBox Name="formDetails" ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="Text">
<TextBlock Name="Txt_Question" Text="{Binding Q}"></TextBlock>
<TextBox Name="TxTAnswer" Text="{Binding A}"></TextBox>
<CheckBox Name="BoolVal" IsChecked="{Binding Val}"></CheckBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
<Button Click="Button_Click" Content="Submit" Grid.Row="1"></Button>
</Grid>
A few things:
You have defined your button as being in Grid.Row="1" which doesn't exist. You need to add a second row otherwise it will just appear in the same row as the ListBox.
Your entire page is within a ScrollViewer, is that really what you want? If you want the Button outside of the scrollviewer then just wrap the ListBox within the ScrollViewer, but that would be kind of pointless because a ListBox has its own ScrollViewer built in.