When ListView HorizontalAlignment=Stretch it no longer scrolls? - xaml

I'm working on a WP WinRT app that contains a page with a ListView that needs to scroll if it's content (binding) is longer than the screen. Now I want this app to be scalable across different screensizes, but right now the scrollviewer just falls of the page, and does not snap to the bottom of the screen.
XAML:
<Grid x:Name="LayoutRoot">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition FromHorizontalOffset="100"/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Title Panel -->
<StackPanel Grid.Row="0" Margin="19,0,0,0">
<TextBlock Text="TITLE" Style="{ThemeResource TitleTextBlockStyle}" Margin="0,12,-0.167,0">
<TextBlock.Foreground>
<SolidColorBrush Color="{StaticResource LightForegroundColor}"/>
</TextBlock.Foreground>
</TextBlock>
<TextBlock Text="subtitle Margin="0,-6.5,0,26.5" Style="{ThemeResource HeaderTextBlockStyle}" CharacterSpacing="{ThemeResource PivotHeaderItemCharacterSpacing}" FontSize="48">
<TextBlock.Foreground>
<SolidColorBrush Color="White"/>
</TextBlock.Foreground>
</TextBlock>
<TextBlock Margin="0,0,18.833,0" TextWrapping="Wrap" Text="This is a textblock with some random text." VerticalAlignment="Top" FontSize="14.667" Style="{StaticResource BaseTextBlockStyle}">
<TextBlock.Foreground>
<SolidColorBrush Color="{StaticResource DarkForegroundColor}"/>
</TextBlock.Foreground>
</TextBlock>
</StackPanel>
<ListView Grid.Row="1" Margin="0,10,0,0">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,11,0,0">
<TextBlock Style="{ThemeResource ListViewItemTextBlockStyle}" Text="Text"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>

Related

UWP Splitview not responsive whenever there is a horizontal scroll

I've a split view (UWP) that inside a scrollviewer with horizontal scrolling enabled. The code shown below has a user control embedded with displays data in a horizontally stacked fashion. I've a header menu which upon clicked should open a split view from right to left. But, whenever there is a horizontal scrolling, the split view opened is not responsive. When i resize the window with splitview opened and horizontal scrolling enabled, I see the app not responsive. What should I do to make the split view response.
By default, I see the splitview responsive whenever there is no horizontal scrolling.
The user control (KanbanControl) shown below is basically a gridview that uses ItemsWrapGrid as it's panel template stacked horizontally
Things tried out:-
a) Tried to disable the horizontal scrolling when the split view is about to be opened, but it is of no help.
Any thoughts folks?
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto" Height="Auto"
x:Name="ContentView">
<Grid Name="ProjectKanbanGrid">
<kanban:KanbanControl x:Name="KanbanCtrl"/>
<SplitView Name="SplitViewPane"
IsPaneOpen="false"
DisplayMode="Overlay"
OpenPaneLength="500" HorizontalAlignment="Right"
FlowDirection="RightToLeft" PaneBackground="White"
BorderBrush="Red" BorderThickness="10"
PaneClosing="SplitViewPane_PaneClosing">
<SplitView.Pane>
<Border BorderThickness="1" CornerRadius="4" BorderBrush="LightGray">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Background="#FAFAFB" Height="50" BorderBrush="#f0f0f0"
CornerRadius="4" BorderThickness="1">
<TextBlock Text="Edit a Task List" FontWeight="Bold"
HorizontalAlignment="Right" Margin="0,10,20,0"/>
</StackPanel>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="50"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<TextBlock Text="Task List" Foreground="Red"
HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBox Name="TaskListName" HorizontalAlignment="Right"
Margin="0,0,20,0" Grid.Row="1" VerticalAlignment="Top" BorderThickness="1"
BorderBrush="LightGray" Width="250"/>
<TextBlock Text="Related Milestone" Grid.Row="2"
HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,20,0"/>
<ComboBox Name="MilestoneList" Width="250" IsTextSearchEnabled="True" BorderThickness="1"
BorderBrush="LightGray" Grid.Row="3" Margin="0,0,20,0"
HorizontalAlignment="Right" VerticalAlignment="Center" >
<ComboBox.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<StackPanel Orientation="Horizontal" Grid.Row="4"
HorizontalAlignment="Right" Margin="0,0,20,0" VerticalAlignment="Center">
<Button Background="White" Margin="20,0,0,0" Content="Cancel" Click="Cancel_Click"/>
<Button Background="#1e5598" Foreground="White" Content="Update" Margin="5,0,0,0"/>
</StackPanel>
</Grid>
</Grid>
</Border>
</SplitView.Pane>
</SplitView>
<RelativePanel Visibility="{x:Bind kanban.IsShowResultGrid,Mode=TwoWay}"
HorizontalAlignment="Center">
<ProgressRing x:Name="LoadProgressRing"
Width="25"
Height="25"
RelativePanel.AlignVerticalCenterWithPanel="True"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"
IsActive="True" />
<TextBlock x:Name="LoadingMessage" Margin="10,0,0,0" HorizontalAlignment="Center"
Text="Fetching your project layouts"
RelativePanel.AlignVerticalCenterWithPanel="True"
RelativePanel.RightOf="LoadProgressRing"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"/>
<TextBlock x:Name="DisplayMsg" Margin="0,0,0,0"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"
Text="{x:Bind kanban.DisplayMessage,Mode=TwoWay}"/>
</RelativePanel>
</Grid>
</ScrollViewer>
Remove the outer scroll viewer from the splitview and wrap it inside the user control Kanban control. This would make the app responsive.
Code snippet is as follows
<Grid Name="ProjectKanbanGrid">
<kanban:KanbanControl x:Name="KanbanCtrl"/>
<SplitView Name="SplitViewPane"
IsPaneOpen="false"
DisplayMode="Overlay"
OpenPaneLength="500" HorizontalAlignment="Right"
FlowDirection="RightToLeft" PaneBackground="White"
BorderBrush="Red" BorderThickness="10"
PaneClosing="SplitViewPane_PaneClosing">
<SplitView.Pane>
<Border BorderThickness="1" CornerRadius="4" BorderBrush="LightGray">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Background="#FAFAFB" Height="50" BorderBrush="#f0f0f0"
CornerRadius="4" BorderThickness="1">
<TextBlock Text="Edit a Task List" FontWeight="Bold"
HorizontalAlignment="Right" Margin="0,10,20,0"/>
</StackPanel>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="50"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<TextBlock Text="Task List" Foreground="Red"
HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBox Name="TaskListName" HorizontalAlignment="Right"
Margin="0,0,20,0" Grid.Row="1" VerticalAlignment="Top" BorderThickness="1"
BorderBrush="LightGray" Width="250"/>
<TextBlock Text="Related Milestone" Grid.Row="2"
HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,20,0"/>
<ComboBox Name="MilestoneList" Width="250" IsTextSearchEnabled="True" BorderThickness="1"
BorderBrush="LightGray" Grid.Row="3" Margin="0,0,20,0"
HorizontalAlignment="Right" VerticalAlignment="Center" >
<ComboBox.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<StackPanel Orientation="Horizontal" Grid.Row="4"
HorizontalAlignment="Right" Margin="0,0,20,0" VerticalAlignment="Center">
<Button Background="White" Margin="20,0,0,0" Content="Cancel" Click="Cancel_Click"/>
<Button Background="#1e5598" Foreground="White" Content="Update" Margin="5,0,0,0"/>
</StackPanel>
</Grid>
</Grid>
</Border>
</SplitView.Pane>
</SplitView>
<RelativePanel Visibility="{x:Bind kanban.IsShowResultGrid,Mode=TwoWay}"
HorizontalAlignment="Center">
<ProgressRing x:Name="LoadProgressRing"
Width="25"
Height="25"
RelativePanel.AlignVerticalCenterWithPanel="True"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"
IsActive="True" />
<TextBlock x:Name="LoadingMessage" Margin="10,0,0,0" HorizontalAlignment="Center"
Text="Fetching your project layouts"
RelativePanel.AlignVerticalCenterWithPanel="True"
RelativePanel.RightOf="LoadProgressRing"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"/>
<TextBlock x:Name="DisplayMsg" Margin="0,0,0,0"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"
Text="{x:Bind kanban.DisplayMessage,Mode=TwoWay}"/>
</RelativePanel>
</Grid>
KanbanControl.xaml
<Grid Margin="0,20,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto" Height="Auto"
x:Name="ContentView">
// Horizontally stacked listview goes here.
</ScrollViewer>
</Grid>

UWP XAML GridView to Fill Vertical space

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>

How to layout a stack of textblocks using stackpanels and grid?

I have a basic UI where there are 6 textblocks, 3 for the values and 3 for the related headers. What I had set out originally was positioning the textblocks using the grid and column positions. This looked fine except for the value textblocks were positioned too close to their header teckblocks.
So to try an alternative solution, in my below code I wrapped each set of textblocks in a stackpanel and supplied a margin for the header textblock. But when testing all six controls appear bunched up together in the top right corner of the screen.
Question:
Does anyone know how to position a set of textblocks, stacked and with a space between the first and second block in each set?
During debug I tried playing around with the margin size on each stackpanel which didn't do anything to fix the layout.
Xaml markup of the UI:
<Grid x:Name="LayoutRoot" Background="#FF236A93">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition />
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- ContentPanel contains details text. Place additional content here -->
<Grid x:Name="ContentPanel"
Grid.Row="1"
Height="600"
Margin="5,0,5,0"
Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="1.6*" />
<RowDefinition Height="1.6*" />
<RowDefinition Height="1.6*" />
<RowDefinition Height="2*" />
<RowDefinition Height="2*" />
<RowDefinition Height="1.3*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*" />
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock Grid.Row="0"
Grid.Column="1"
Margin="0,0,5,0"
Width="270"
Height="72"
HorizontalAlignment="Right"
VerticalAlignment="Top"
FontSize="24"
Foreground="Gray"
Text="Hourly Tariff:" />
<TextBlock Grid.Row="0"
Grid.Column="1"
Width="270"
Height="72"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
FontSize="24"
Foreground="White"
Text="{Binding SelectedZone.TariffPH}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Grid.Row="1"
Grid.Column="1"
Width="270"
Height="72"
Margin="0,0,5,0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
FontSize="24"
Foreground="Gray"
Text="Hours Open:" />
<TextBlock Grid.Row="1"
Grid.Column="1"
Width="270"
Height="72"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
FontSize="24"
Foreground="White"
Text="{Binding SelectedZone.HoursOpen}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Grid.Row="2"
Grid.Column="1"
Width="270"
Height="72"
Margin="0,0,5,0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
FontSize="24"
Foreground="Gray"
Text="Days Open:" />
<TextBlock Grid.Row="2"
Grid.Column="1"
Width="270"
Height="72"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
FontSize="24"
Foreground="White"
Text="{Binding SelectedZone.DaysOpen}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Grid.Row="3"
Grid.Column="1"
Width="270"
Height="72"
Margin="0,0,5,0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
FontSize="24"
Foreground="Gray"
Text="Parking Restrictions:" />
<TextBlock Grid.Row="3"
Grid.Column="1"
Width="270"
Height="72"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
FontSize="24"
Foreground="White"
Text="{Binding SelectedZone.Restrictions}" />
</StackPanel>
</Grid>
</Grid>
Proposed layout of UI:
If it were me, I'd just turn all that noise into something more like this for easier maintenance/readability and less objects in the DOM;
<!-- ContentPanel contains details text. Place additional content here -->
<StackPanel x:Name="ContentPanel"
Grid.Row="1" Margin="5,0">
<StackPanel.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="24"/>
<Setter Property="Width" Value="270"/>
<Setter Property="Foreground" Value="Gray"/>
<Setter Property="Margin" Value="0,5"/>
</Style>
</StackPanel.Resources>
<TextBlock>
<Run Text="Hourly Tariff:"/>
<LineBreak/>
<Run Text="{Binding SelectedZone.TariffPH}" Foreground="White"/>
</TextBlock>
<TextBlock>
<Run Text="Hours Open:"/>
<LineBreak/>
<Run Text="{Binding SelectedZone.HoursOpen}" Foreground="White"/>
</TextBlock>
<TextBlock>
<Run Text="Days Open:"/>
<LineBreak/>
<Run Text="{Binding SelectedZone.DaysOpen}" Foreground="White"/>
</TextBlock>
<TextBlock>
<Run Text="Parking Restrictions:"/>
<LineBreak/>
<Run Text="{Binding SelectedZone.Restrictions}" Foreground="White"/>
</TextBlock>
</StackPanel>
ADDENDUM: Just noticed you had your StackPanel's Horizontal. For the Same effect just remove the <LineBreak/> lines and they'll be horizontal.

Get height of all child ListViews

So I have a ScrollView with a StackPanel. Inside the StackPanel I have three ListViews with different List<object>-sources.
What I want to achieve is to disable scrolling on the ListViews and only scroll all of them in the same ScrollView.
I get something that scrolls a little bit okey when i hardcode the height of the scrollview, but if I don't do that it only snaps back to start after I release the finger. How can I achieve to get the height?
Current XAML:
<Style x:Key="ListViewHeaderDisableScroll" TargetType="ListView">
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
</Style>
<Page
x:Class="TestApp.SecondaryView.PatientDetailView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ViewModels="using:TestApp.ViewModel"
mc:Ignorable="d">
<Page.DataContext>
<ViewModels:PatientDetailViewModel />
</Page.DataContext>
<Grid Background="White">
<StackPanel Orientation="Vertical">
/* Menu-Grid*/
<ScrollViewer VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Hidden" IsVerticalRailEnabled="True" Height="800">
<StackPanel Name="StackPanel_Lists">
<ListView Style="{StaticResource ListViewHeaderDisableScroll}" ItemsSource="{Binding DummyProblems}" Background="White">
<ListView.Header>
<StackPanel Style="{StaticResource ListViewHeaderStackPanel}">
<TextBlock Text="HEADER 1" FontSize="18" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0"/>
<SymbolIcon Symbol="Play" Foreground="White" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,0,10"/>
</StackPanel>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate x:DataType="ViewModels:PatientDetailViewModel">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock FontSize="20" Grid.Row="0" Foreground="DimGray" Margin="5,5,5,5" Text="{Binding Note}"></TextBlock>
<TextBlock FontSize="15" Grid.Row="1" Foreground="DimGray" Margin="5,5,5,5" Text="{Binding Fo}"></TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Style="{StaticResource ListViewHeaderDisableScroll}" ItemsSource="{Binding DummyMeasures}" Background="White">
<ListView.Header>
<StackPanel Background="DarkGray" Orientation="Horizontal" FlowDirection="LeftToRight" Padding="8,8,8,8">
<TextBlock Text="HEADER 2" FontSize="18" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0"/>
<SymbolIcon Symbol="Play" Foreground="White" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,0,10"/>
</StackPanel>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate x:DataType="ViewModels:PatientDetailViewModel">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock FontSize="20" Grid.Row="0" Foreground="DimGray" Margin="5,5,5,5" Text="{Binding Description}"></TextBlock>
<TextBlock FontSize="15" Grid.Row="1" Foreground="DimGray" Margin="5,5,5,5" Text="{Binding Note}"></TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Style="{StaticResource ListViewHeaderDisableScroll}" ItemsSource="{Binding DummyGoals}" Background="White">
<ListView.Header>
<StackPanel Background="DarkGray" Orientation="Horizontal" FlowDirection="LeftToRight" Padding="8,8,8,8">
<TextBlock Text="HEADER 3" FontSize="18" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0"/>
<SymbolIcon Symbol="Play" Foreground="White" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,0,10"/>
</StackPanel>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate x:DataType="ViewModels:PatientDetailViewModel">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock FontSize="20" Grid.Row="0" Foreground="DimGray" Margin="5,5,5,5" Text="{Binding Description}"></TextBlock>
<TextBlock FontSize="15" Grid.Row="1" Foreground="DimGray" Margin="5,5,5,5" Text="{Binding Fo}"></TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
So I found this:
The StackPanel outside og everything did ruin everything. I changed it to Grid and made the ScrollView *. Now everything works

Bind ListViewItem's height to the ListView from dataTemplate

I have a ListView in my Windows Store App, which selects a template through dataTemplateSelector. In the ItemTemplate of ListView, i have an image. I don't want to fix the height and width of the image, i want to allow it to adjust itself with the space available. So the image can be displayed bigger in big screen size.
Following is my ListView XAML:
<ListView Name="MyListView" ItemTemplateSelector="{StaticResource MyTemplateConverter}"
Height="{Binding ActualHeight, ElementName=scroll, Converter={StaticResource BottomMarginConverter}}" Width="{Binding ActualWidth, Converter={StaticResource GVWIdthConverter}, ElementName=scroll}"
Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Tapped="MyGridView_Tapped">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" VerticalAlignment="Stretch" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Margin" Value="0,5,0,5" />
<Setter Property="Background" Value="LightCyan" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="3" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
I have set VerticalContentAlignment to Stretch, this stretches my ListViewItem to the size of ListView, but the problem is when the image inside the Item is bigger, it increases the size of ListViewItem larger than ListView. I have also tried setting the height of ListViewItem in the above code by adding
<Setter Property="Height" Value="{Binding ActualHeight, ElementName=MyGridView}" />
Following is the code of my ItemTemplate, which is being selected through ItemTemplateSelector,
<DataTemplate x:Key="PhotoTemplate">
<Grid x:Name="PhotoTemplateGrid" Width="400" Margin="2" Background="LightPink" >
<Grid.RowDefinitions>
<RowDefinition Height="90"/>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="5" HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding from.photoUrl}" Height="70" HorizontalAlignment="Center" VerticalAlignment="Center" Width="70" />
<StackPanel Orientation="Vertical" Margin="10,10,0,0" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBlock Grid.Column="1" Text="{Binding from.Name}" Style="{StaticResource SubHeaderText}" VerticalAlignment="Top"
IsHitTestVisible="false" TextWrapping="NoWrap" Foreground="{StaticResource StalkerBlueThemeBrush}" />
<TextBlock Text="{Binding created_Time, Converter={StaticResource TextDateConverter}}" Margin="0,0,0,0" Style="{StaticResource BaselineTextStyle}" VerticalAlignment="Top"
IsHitTestVisible="false" TextWrapping="NoWrap" FontSize="12" />
</StackPanel>
</Grid>
<Grid Grid.Row="1" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Margin="5,0,5,0" TextAlignment="Center" MaxHeight="40" HorizontalAlignment="Stretch" Text="{Binding message}" Style="{StaticResource BaselineTextStyle}"
TextTrimming="WordEllipsis" IsHitTestVisible="false" TextWrapping="Wrap" VerticalAlignment="Center" />
<TextBlock Grid.Row="1" MaxHeight="20" Margin="5,0,5,0" TextAlignment="Center" Text="{Binding description}" Style="{StaticResource BaselineTextStyle}"
TextTrimming="WordEllipsis" IsHitTestVisible="false" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Stretch" />
<Image Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="Uniform" Source="{Binding picture}" Margin="2" />
</Grid>
<Grid Grid.Row="2" Background="LightGray" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="15" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Height="Auto" Background="White" >
<Polygon Points="15,0 0,15 30,15" Stroke="LightGray" Fill="LightGray" Margin="20,0,0,0" />
</Grid>
<Grid Grid.Row="1" HorizontalAlignment="Stretch">
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0" Text="View all comments" Style="{StaticResource BaselineTextStyle}" Foreground="{StaticResource BlueThemeBrush}" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,0,5,0">
<Image Height="15" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="0,0,0,0" Width="25" Source="ms-appx:///Assets/CtBlueSmall.png" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" TextWrapping="NoWrap" TextTrimming="WordEllipsis" Text="{Binding CtCount}" Foreground="White" />
<Image Height="15" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="0,0,0,0" Width="25" Source="ms-appx:///Assets/LeBlueSmall.png" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" TextWrapping="NoWrap" TextTrimming="WordEllipsis" Text="{Binding LeCount}" Foreground="White" />
</StackPanel>
</Grid>
</Grid>
</Grid>
</DataTemplate>
The Grid at Row Number 1 <Grid Grid.Row="1" >, contains the image which makes the height go larger than the ListView. I want to allow this Grid to stretch itself to the size of its parent. But not cross the size of its parent. in other word, i simply want to bind its height to its parent. Please help me out, i am stuck here.
have you tried to change the Row Definition applied for that image to 'Auto'?
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
I have managed to solve this in my own project by binding the Height of the Grid in the DataTemplate to the ActualHeight of the ListView. I does not seem to work if the binding is in the ListView.ItemContainerStyle style as a setter.
<DataTemplate>
<Grid Height="{Binding ActualHeight, ElementName=MyListView}">
...
</Grid>
</DataTemplate>