Get height of all child ListViews - xaml

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

Related

Last ListBox Item hides behind the command Bar in windows phone 8.1 RT

Inside my xaml page, I have a dynamically generated ListBox, Textblocks and Textboxes in a Stack Panel and it also has a "Page.BottomAppBar" which consists the CommandBar at the bottom of the page.
Code Edit 1 :(Provided Complete XAML UI code)
<Page>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="60"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Foreground="#616161" x:Name="tbHeading1" Text="Event Details" Margin="15,0,0,0" Width="auto" TextWrapping="Wrap" VerticalAlignment="Center" FontFamily="Calibri" FontSize="28" HorizontalAlignment="Left"></TextBlock>
</Grid>
<!--<ScrollViewer VerticalScrollBarVisibility="Auto" >-->
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Background="White" Margin="0,0,0,1">
<!--EVENT TYPE-->
<TextBlock FontFamily="Arial MT Regular" Margin="15,0,0,0" Foreground="#616161" x:Name="tbEventType" Text="Event Type" FontSize="20"></TextBlock>
<ComboBox x:Name="cmbEventType" RequestedTheme="Light" Padding="5,0,0,0" PlaceholderText=" - Tap for Selection - " FontSize="16" FontFamily="Calibri" Width="auto" BorderBrush="#80b656" BorderThickness="2" SelectedIndex="-1" SelectionChanged="cmbEventType_SelectionChanged" Margin="15,0">
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock x:Name="txtEventType" Text="{Binding Name}" Padding="5,0,0,0" Foreground="#80b656" FontFamily="Calibri" FontSize="20" TextAlignment="Left"/>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<!--END EVENT TYPE-->
<!--SITE-->
<TextBlock FontFamily="Arial MT Regular" Margin="15,5,0,0" Foreground="#616161" x:Name="tbSite" Text="Site" FontSize="20"></TextBlock>
<ComboBox x:Name="cmbSite" RequestedTheme="Light" Padding="5,0,0,0" PlaceholderText=" - Tap for Selection - " FontSize="16" FontFamily="Calibri" Width="auto" BorderBrush="#80b656" BorderThickness="2" Margin="15,0"
SelectionChanged="cmbSite_SelectionChanged" SelectedIndex="-1">
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock x:Name="txtSite" Text="{Binding Name}" Padding="5,0,0,0" Foreground="#80b656" FontFamily="Calibri" FontSize="20" TextAlignment="Left"/>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<!--END SITE-->
<!--LOCATION-->
<TextBlock FontFamily="Arial MT Regular" Margin="15,5,0,0" Foreground="#616161" x:Name="tbLocation" Text="Location" FontSize="20"></TextBlock>
<ComboBox x:Name="cmbLocation" RequestedTheme="Light" Padding="5,0,0,0" PlaceholderText=" - Tap for Selection - " FontSize="16" FontFamily="Calibri" Width="auto" BorderBrush="#80b656" BorderThickness="2" SelectedIndex="-1" Margin="15,0">
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock x:Name="txtLocation" Text="{Binding Location_Description}" Padding="5,0,0,0" Foreground="#80b656" FontFamily="Calibri" FontSize="20" TextAlignment="Left"/>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<!--END LOCATION-->
<!--EVENT DATE-->
<TextBlock FontFamily="Arial MT Regular" Margin="15,5,0,0" Foreground="#616161" x:Name="tbEventDate" Text="Event Date" FontSize="20"></TextBlock>
<DatePicker x:Name="txtEventDate" Margin="15,0" Background="White" Foreground="#80b656" FontSize="20" BorderBrush="Silver" HorizontalAlignment="Left" Width="auto" DateChanged="txtEventDate_DateChanged"></DatePicker>
<!--END EVENT DATE-->
<Line x:Name="lineSeparator" Fill="Gray" Stroke="Gray" X2="1" Stretch="Fill" Margin="0"/>
</StackPanel>
<!--ADDITIONAL FIELDS-->
<Grid x:Name="spAdditionalFeilds" Grid.Row="1" Background="White" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock x:Name="txtblkAdditionalFeilds" Grid.Row="0" Margin="15,0,0,0" Foreground="#616161" Text="Additional Fields" FontWeight="SemiBold" FontSize="20"></TextBlock>
<ListBox x:Name ="lstAdditionFields" Grid.Row="1" ItemsSource="{Binding AdditionalFieldControl, Mode=TwoWay}" ScrollViewer.VerticalScrollBarVisibility="Disabled" Foreground="Black" Background="White" HorizontalAlignment="Left" VerticalAlignment="Top" BorderThickness="1" Width="auto" Tapped="lstAdditionFields_Tapped" ScrollViewer.VerticalScrollMode="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,5,0,5">
<TextBlock x:Name="txtCaption" FontFamily="Arial MT Regular" Margin="15,5,0,0" Text="{Binding Caption, Mode=TwoWay}" Padding="0,0,0,0" Foreground="#616161" FontSize="20" Width="auto"/>
<Border Margin="15,8,10,0" Padding="2,3,2,3" BorderBrush="#80b656" BorderThickness="2">
<TextBlock x:Name="txtDefaultVal" FontFamily="Arial MT Regular" Text="{Binding StrDefalutValue, Mode=TwoWay}" TextWrapping="WrapWholeWords" Padding="5,0,0,0" Foreground="#80b656" FontSize="20" Loaded="txtDefaultVal_Loaded" />
</Border>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Line x:Name="lineSeparatorAdditionalField" Grid.Row="2" Fill="Gray" Stroke="Gray" X2="1" Stretch="Fill" Margin="5,0"/>
</Grid>
<!--END OF ADDITIONAL FIELD-->
<!--IMAGE ATACHMENT LIST-->
<Grid x:Name="spImageList" Grid.Row="2" Background="White" Margin="0,12,0,0" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock x:Name="txtblkAttachmentList" Grid.Row="0" Margin="15,0,0,0" Foreground="#616161" Text="Attachment List" FontWeight="SemiBold" FontSize="20"></TextBlock>
<ListBox x:Name="lbAttachmentList" Grid.Row="1" ItemsSource="{Binding EventAttachment, Mode=TwoWay}" Foreground="Black" Background="White" HorizontalAlignment="Left" VerticalAlignment="Top" BorderThickness="1" Width="auto" Padding="0,0,0,40" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<!--ONE ROW-->
<StackPanel>
<Grid x:Name="attachmentStackPanel" VerticalAlignment="Center" Margin="0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="70"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Margin="15,0,0,0" Source="{Binding AttachmentPath,Converter={StaticResource PathToImage}, Mode=TwoWay}" Width="110" Height="110" ></Image>
<TextBlock x:Name="txtName" Grid.Column="1" Width="auto" Margin="20,0,0,0" Text="{Binding Name,Mode=TwoWay}" Style="{StaticResource BodyTextBlockStyle}" Foreground="#616161" VerticalAlignment="Center" FontFamily="Calibri" FontSize="28" HorizontalAlignment="Left" Loaded="txtName_Loaded" />
<AppBarButton x:Name="btnRemoveImage" Grid.Column="2" Height="50" Icon="Cancel" Width="70" VerticalAlignment="Center" Foreground="Red" Click="btnRemoveImage_Click"></AppBarButton>
</Grid>
<Line x:Name="lineSeparator" Fill="#E0E0E0" Stroke="Gray" X2="1" Stretch="Fill" Margin="5,5"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
<!--END IMAGE ATACHMENT LIST-->
</Grid>
<!--</ScrollViewer>-->
</Grid>
</ScrollViewer>
<Page.BottomAppBar>
<CommandBar x:Name="CommandBarBottom" IsSticky="False" Background="LightGray" Foreground="#616161" ClosedDisplayMode="Compact">
<CommandBar.PrimaryCommands>
<AppBarButton x:Name="btnSaveEvent" Icon="Save" Label="Done" HorizontalAlignment="Right" Content="Save Event" Click="btnSaveEvent_Click"/>
<AppBarButton x:Name="btnAddAttachment" Icon="Attach" Label="Capture Img" HorizontalAlignment="Right" HorizontalContentAlignment="Right" Content="Capture Image" Click="btnAddAttachment_Click" />
</CommandBar.PrimaryCommands>
</CommandBar>
</Page.BottomAppBar>
Sometimes Last ListBox Item of my UI(List) hides behind the Command Bar(refer attachment).
.
So, I don't want the UI to get hide behind the Command bar.
The UI scrolls perfectly apart from overlapping the Command bar. But sometimes this issue appears when it starts scrolling behind the Command Bar. The ScrollViewer doesn't scroll as per as required in this case.
There are a couple of things:
I would advise you to use a ListView instead of a ListBox unless you need it for some particular reason. For more information refer this.
The Appbar is currently overlapping your content due to your ApplicationView to fix it, you can refer this.

Get Selected Index of List View From Page Resource

Below is my XAML code, I want to get the list selection index from the ListView using SelectionChanged event. I cannot achieve this.
<Page
x:Class="MMRevamp_2016.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MMRevamp_2016"
xmlns:ViewModels="using:MMRevamp_2016.ViewModels"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="Gray"
FontFamily="{StaticResource ContentControlThemeFontFamily}">
<Page.Resources>
<ViewModels:HomePageViewModel x:Key="ViewModel" />
<DataTemplate x:Key="headerTemplate">
<TextBlock Text="{Binding Title}" FontSize="16"/>
</DataTemplate>
<DataTemplate x:Key="pivotTemplate">
<ListView x:Name="listView" Background="White" SelectionChanged="getIndex" ItemsSource="{Binding Articles}" HorizontalAlignment="Left" Margin="-25 0 -25 0">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Tapped="ArticleDetailStackPanel_Tapped">
<Grid>
<Image x:Name="ArticleImage" Source="{Binding ImageURL}"></Image>
<Grid>
<Border VerticalAlignment="Bottom" Height="65" Background="Black" Opacity="0.5">
</Border>
<TextBlock x:Name="HeadLine" Text="{Binding HeadLine}" VerticalAlignment="Bottom"
Margin="10 0 0 5" TextWrapping="Wrap"
FontSize="20" Foreground="White"
Pivot.SlideInAnimationGroup="GroupTwo"
FontWeight="Bold" />
</Grid>
</Grid>
<StackPanel>
<TextBlock Text="{Binding Abstract}" TextWrapping="Wrap" FontSize="15"
Pivot.SlideInAnimationGroup="GroupTwo" Margin="10 5 0 10"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DataTemplate>
</Page.Resources>
<Grid Background="Gray">
<Grid x:Name="LoadingGrid" Visibility="Visible">
<ProgressRing x:Name="progressRing" IsActive="True" Foreground="White" HorizontalAlignment="Center" Width="60"
Height="50" VerticalAlignment="Center" Margin="0 20 0 0"></ProgressRing>
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60"></RowDefinition>
<RowDefinition Height="45"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Image Source="Source" HorizontalAlignment="Center" Margin="1 5 0 0"></Image>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="60" Height="60" Background="Transparent" Margin="-10 -20 0 0"
Click="HamburgerButton_Click"/>
</Grid>
<Grid Grid.Column="1">
<TextBlock Text="செய்திகள்" HorizontalAlignment="Center" FontSize="30"
Margin="-35 0 0 0" Foreground="White"></TextBlock>
</Grid>
</Grid>
<Grid Grid.Row="2" x:Name="ArticlesGrid" Visibility="Collapsed">
<SplitView x:Name="MySplitView" DisplayMode="CompactOverlay" IsPaneOpen="False"
CompactPaneLength="0" OpenPaneLength="220">
<SplitView.Pane>
<ListView x:Name="menuBindList" Background="Gray">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<StackPanel Orientation="Horizontal" Tag="{Binding SectionName}">
<!--<Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Margin="-10 0 0 0"/>-->
<TextBlock Text="{Binding TitleofAccess}"
Tag="{Binding SectionName}" FontSize="18"
VerticalAlignment="Center" Tapped="MenuTextBlock_Tapped" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</SplitView.Pane>
<SplitView.Content>
<ScrollViewer Name="articlesScroll">
<Pivot DataContext="{StaticResource ViewModel}" x:Name="pivot"
HeaderTemplate="{StaticResource headerTemplate}"
ItemTemplate="{StaticResource pivotTemplate}" ItemsSource="{Binding Feeds}" Margin="0,-10,0,10"
SelectionChanged="pivot_SelectionChanged">
</Pivot>
</ScrollViewer>
</SplitView.Content>
</SplitView>
</Grid>
</Grid>
</Grid>
</Page>
If anyone guide me to achieve this would be very helpful. Thanks in advance
In the getIndex method do this,
int selectedItemIndex = (sender as ListView).SelectedIndex;

GridView ItemTemplate Full Width

My question is: how can I stretch the DataTemplate to the full width of the screen. I've tried many solutions but they does not work.
I've tried HorizontalContentAlignment, setting GridView.ItemContainerStyle and etc. But nothing works. Can anybody explain me how can I do this?
Here is part of my code:
<Grid Style="{StaticResource GeneralAppBackground}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Pivot x:Name="AccountInfoOptions" Grid.Row="1">
<PivotItem Header="История">
<GridView ItemsSource="{x:Bind CheckoutList}" Margin="5,0,5,0">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:UserCheckout">
<StackPanel Orientation="Horizontal" BorderBrush="Transparent" Background="White" Padding="5" Margin="0,5,0,0">
<StackPanel Grid.Column="0" Orientation="Vertical" VerticalAlignment="Center" Margin="0,0,10,0">
<TextBlock FontSize="14" Text="{x:Bind CheckoutDate}" Foreground="#979797" />
<TextBlock FontSize="14" Text="{x:Bind CheckoutTime}" Foreground="#979797" />
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{x:Bind CheckoutSum}" FontSize="22" FontWeight="Bold" />
<Image Source="/Assets/TengeIcon.png" Width="20" Margin="5,0,0,0"/>
</StackPanel>
<TextBlock Text="{x:Bind CheckoutTitle}" TextAlignment="Center" />
</StackPanel>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</GridView.ItemContainerStyle>
</GridView>
</PivotItem>
</Pivot>
The key to making it work, is changing the ItemsPanelTemplate. Define it as a page resource:
<Page.Resources>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate">
<ItemsStackPanel />
</ItemsPanelTemplate>
</Page.Resources>
Now set it as the ItemsPanel for your GridView:
<GridView ItemsSource="{x:Bind CheckoutList}"
Margin="5,0,5,0"
ItemsPanel="{StaticResource ResourceKey=ItemsPanelTemplate}">
This will allow individual items to stretch across the full width. You will still need to replace the root StackPanel in your DataTemplate with a Grid as Nikita suggested:
<DataTemplate x:DataType="local:UserCheckout">
<Grid BorderBrush="Transparent" Background="White" Padding="5" Margin="0,5,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Vertical" VerticalAlignment="Center" Margin="0,0,10,0">
<TextBlock FontSize="14" Text="{x:Bind CheckoutDate}" Foreground="#979797" />
<TextBlock FontSize="14" Text="{x:Bind CheckoutTime}" Foreground="#979797" />
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{x:Bind CheckoutSum}" FontSize="22" FontWeight="Bold" />
<Image Source="/Assets/TengeIcon.png" Width="20" Margin="5,0,0,0"/>
</StackPanel>
<TextBlock Text="{x:Bind CheckoutTitle}" TextAlignment="Center" />
</StackPanel>
</Grid>
</DataTemplate>
You already have the Grid.Column property set correctly for the inner StackPanels. It seems you were attempting to use a Grid there before.

Universal App ListView Item HorizontalAlignment

I would like to create a ListView that has right aligned items as well as left aligned. So far in all my attempts with DataTemplates and ItemContainerStyles, I am not able to get this working. The left alignment works fine as that is the default, but I cannot figure out how to get some items right-aligned. For example, this would be similar to a chat/conversation type view like the Windows Phone Messaging app.
My current XAML looks like this:
<Page
x:Class="MDControl.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MDControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<CollectionViewSource x:Name="Messages" Source="{Binding mMessages}"/>
<DataTemplate x:Key="SentMessageTemplate">
<StackPanel Padding="10" Margin="5" Background="Teal" HorizontalAlignment="Right" Width="Auto">
<TextBlock Text="{Binding MessageType}" FontWeight="Bold" TextWrapping="NoWrap" Foreground="White"/>
<TextBlock Text="{Binding MessageBody}" TextWrapping="Wrap" Foreground="White" />
<TextBlock Text="{Binding Timestamp}" TextWrapping="NoWrap" Foreground="White" FontStyle="Italic" FontSize="12"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="ReceivedMessageTemplate">
<StackPanel Padding="10" Margin="5" Background="LightGray">
<TextBlock Text="{Binding MessageType}" FontWeight="Bold" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding MessageBody}" TextWrapping="Wrap"/>
<TextBlock Text="{Binding Timestamp}" TextWrapping="NoWrap" TextAlignment="Right" FontStyle="Italic" FontSize="12"/>
</StackPanel>
</DataTemplate>
<Style TargetType="ListViewItem" x:Key="SentMessageStyle">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
<Style TargetType="ListViewItem" x:Key="ReceivedMessageStyle">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
<local:MessageListTemplateSelector x:Key="MessageListTemplateSelector"
SentMessageTemplate="{StaticResource SentMessageTemplate}"
ReceivedMessageTemplate="{StaticResource ReceivedMessageTemplate}">
</local:MessageListTemplateSelector>
<local:MessageListContainerStyleSelector x:Key="MessageListContainerStyleSelector"
SentMessageStyle="{StaticResource SentMessageStyle}"
ReceivedMessageStyle="{StaticResource ReceivedMessageStyle}">
</local:MessageListContainerStyleSelector>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView x:Name="messageList" ScrollViewer.VerticalScrollBarVisibility="Visible" ItemContainerStyleSelector="{StaticResource MessageListContainerStyleSelector}" ItemsSource="{Binding Source={StaticResource Messages}}" ItemTemplateSelector="{StaticResource MessageListTemplateSelector}" Margin="10,120,10,50" VerticalAlignment="Bottom" IsDoubleTapEnabled="False"/>
</Grid>
What can I change to get the "Sent" messages to be right aligned? Currently they show up with a Teal background which I want, but they are still Left aligned instead of Right. I am a little new to XAML, so forgive me if I'm way off here.
UPDATE: Solution
Grids were the key, I ended up having to use multiple grids to achieve the correct right-alignment, in conjunction with an ItemContainerStyle setting the HorizontalContentAlignment.
<Page
x:Class="MDControl.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MDControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<CollectionViewSource x:Name="Messages" Source="{Binding mMessages}"/>
<DataTemplate x:Key="SentMessageTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Height="Auto" Grid.Row="1" Margin="5" HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Padding="10" Background="Teal">
<TextBlock Text="{Binding MessageType}" FontWeight="Bold" TextWrapping="NoWrap" Foreground="White" />
<TextBlock Text="{Binding MessageBody}" TextWrapping="Wrap" Foreground="White" />
<TextBlock Text="{Binding Timestamp}" TextWrapping="NoWrap" Foreground="White" FontStyle="Italic" FontSize="12" HorizontalAlignment="Right"/>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
<DataTemplate x:Key="ReceivedMessageTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Height="Auto" Grid.Row="1" Margin="5" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Padding="10" Background="LightGray">
<TextBlock Text="{Binding MessageType}" FontWeight="Bold" TextWrapping="NoWrap" />
<TextBlock Text="{Binding MessageBody}" TextWrapping="Wrap" />
<TextBlock Text="{Binding Timestamp}" TextWrapping="NoWrap" FontStyle="Italic" FontSize="12" HorizontalAlignment="Right"/>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
<local:MessageListTemplateSelector x:Key="MessageListTemplateSelector"
SentMessageTemplate="{StaticResource SentMessageTemplate}"
ReceivedMessageTemplate="{StaticResource ReceivedMessageTemplate}">
</local:MessageListTemplateSelector>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView x:Name="messageList" ScrollViewer.VerticalScrollBarVisibility="Visible" ItemsSource="{Binding Source={StaticResource Messages}}" ItemTemplateSelector="{StaticResource MessageListTemplateSelector}" Margin="10,120,10,50" VerticalAlignment="Bottom" IsDoubleTapEnabled="False">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
</Grid>
The problem is in your DataTemplates , not in styles or etc.You must use Grid instead of Stackpanel in your DataTemplate to achieve that.
Stackpanels won't stretch to parent.They'll only get the width / height of all controls inside it.Try something like
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
You should use HorizontalAlignment property which defines the position of the element inside a parent element.<Grid x:Name="simpleGrid" height = 50 width = 100 HorizontalAlignment="right" />

Scrollviewer is not working

I am not able to make the scrollviewer working! The list is not scrollable. Maybe you can help me :)
<Grid x:Name="grid">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollViewer Margin="0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<StackPanel VerticalAlignment="Top">
<ListBox x:Name="KommentareListView" ItemsSource="{Binding}" Foreground="White" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Background="#FF0083FF" Width="10" />
<StackPanel Margin="10,5,10,5" Grid.Column="1">
<TextBlock Text="{Binding Kommentar}"
FontSize="16" Margin="0,0,0,0" TextWrapping="Wrap" Foreground="Black"/>
<StackPanel Orientation="Horizontal" >
<TextBlock Text="{Binding Author}"
FontSize="12" Margin="0,0,0,0" Foreground="Black"/>
<TextBlock Text="{Binding Date}"
FontSize="12" Margin="30,0,0,0" Foreground="Black"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button x:Name="mehrKommentareLaden" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,10,0,0" Height="45" Visibility="Collapsed" Content="mehr Kommentare laden" Click="mehrKommentareLaden_Click" />
</StackPanel>
</ScrollViewer>
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Bottom" Grid.Row="1">
<StackPanel x:Name="AnmeldenPanel" VerticalAlignment="Bottom" Width="456" Visibility="Collapsed">
<Button x:Name="AnmeldenButton" Content="Anmelden" VerticalAlignment="Center" BorderBrush="Black" Foreground="Black" Margin="0" Click="AnmeldenButton_Click"/>
<TextBlock TextWrapping="Wrap" Text="Du musst dich anmelden, um Kommentare zu verfassen." Margin="15,0,0,0"/>
</StackPanel>
<toolkit:PhoneTextBox x:Name="KommentarBox" Hint="Dein Kommentar..." LengthIndicatorVisible="True" LengthIndicatorThreshold="10" DisplayedMaxLength="240" TextWrapping="Wrap" Background="#BFB2B2B2" BorderBrush="#BFFFFFFF" Foreground="#91000000" SelectionBackground="#FF0083FF" SelectionForeground="White" Style="{StaticResource PhoneTextBoxWhiteBackground}" Height="74" Width="456"/>
</StackPanel>
<!--<Controls:WatermarkTextBox x:Name="KommentarTextBox" Margin="0,0,100,20" TextWrapping="Wrap" Watermark="Dein Kommentar...." Height="30" VerticalAlignment="Center" FontFamily="Calibri" FontSize="17.333" BorderBrush="#CC000000"/>-->
</Grid>
Try making the List height to auto and everything else to auto which is in between List and ScrollView like you are having StackPanel.