am new in UWP and need to do a navigation drawer using SplitView, so my basic layout structure is mentioned below. The problem is that I don't have vertical scroll for list items, maybe I miss some params, any help is appreciated.
<SplitView
x:Name="MySplitView"
DisplayMode="CompactOverlay"
IsPaneOpen="True"
CompactPaneLength="50"
OpenPaneLength="280">
<!--navigation drawer-->
<SplitView.Pane>
<StackPanel
Background="Gray">
<StackPanel>
<ListView
x:Name="DrawerListOptions"
SelectionChanged="MySelectionChanged"
SelectionMode="Single"
ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock
Text="{Binding Title}"
FontSize="18"
Margin="5,0,0,0" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</StackPanel>
</SplitView.Pane>
<!--page stuff-->
<SplitView.Content>
<!--page code-->
</SplitView.Content>
</SplitView>
At first, change StackPanel to Grid
<SplitView x:Name="MySplitView"
PaneBackground="Gray"
DisplayMode="CompactOverlay"
IsPaneOpen="True"
CompactPaneLength="50"
OpenPaneLength="280">
<!--navigation drawer-->
<SplitView.Pane>
<Grid>
<ListView x:Name="DrawerListOptions"
SelectionChanged="MySelectionChanged"
SelectionMode="Single"
ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}"
FontSize="18"
Margin="5,0,0,0" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</SplitView.Pane>
<!--page stuff-->
<SplitView.Content>
<!--page code-->
</SplitView.Content>
</SplitView>
If this does not help try to setup ScrollViewer.VerticalScrollBarVisibility="Visible"
UPDATE
If you want to place some elements above ListView use Grid.RowDefinitions
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel>
<!--Other elements-->
</StackPanel>
<ListView x:Name="DrawerListOptions"
Grid.Row="1"
SelectionChanged="MySelectionChanged"
SelectionMode="Single"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}"
FontSize="18"
Margin="5,0,0,0" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</SplitView.Pane>
How it works:
StackPanel has already a scrollviewer. Just set height in the listView and the scroller will come up. Without height listview doesn't understand that it goes at of the screen. This way you won't need to use a Grid. It worked for me!
Related
For my Windows 8.1 XAML app, I am trying to create a XAML layout that resembles the following description:
One StackPanel that contains two GridViews (let's say GV1, GV2)
Each GridView contains images that are displayed through data binding
GV1 and GV2 should be horizontally stacked when screen is in landscape mode. Their width should be equal. The scrolling of images should be vertical.
GV1 and GV2 should be vertically stacked when screen is in portrait mode. There height should be equal. The scrolling of images should be horizontal.
I have tried several approaches using various combinations of GridViews, StackPanels, ScrollViewer etc. but nothing seems to work.
My latest attempt at creating a basic horizontal layout is here:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel x:Name="theStackPanel" Orientation="Horizontal">
<GridView x:Name="firstGridView"
ItemsSource="{Binding Path=FirstInputFileList}"
Margin="10,10,10,10"
SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Center">
<Image Source="{Binding Path=SrcImage}" HorizontalAlignment="Center" Width="300" Height="225"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<GridView x:Name="secondGridView"
ItemsSource="{Binding Path=SecondInputFileList}"
Margin="10,10,10,10"
SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Center">
<Image Source="{Binding Path=SrcImage}" HorizontalAlignment="Center" Width="120" Height="90"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</StackPanel>
</Grid>
Any pointers or some kind of pseudo XAML code would be really helpful.
I'd try this:
<Page
x:Class="App79.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App79"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<!-- Two layouts to put in the page. Handle SizeChanged events to show the one that should be visible.
You could use VisualStateManager to switch between these if you want to keep designer support. -->
<ContentPresenter
x:Name="PortraitLayout"
Visibility="Collapsed">
<ContentPresenter.ContentTemplate>
<!-- Collapsed ContentPresenter in Windows 8.1 is roughly equivalent to x:Defer in Windows 10 -->
<DataTemplate>
<Grid>
<!-- Note that using a Grid here works better than a StackPanel since it will let you split the space into two rows/columns of same size -->
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<GridView
x:Name="firstGridView"
ItemsSource="{Binding Path=FirstInputFileList}"
Margin="10,10,10,10"
SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<Image
Source="{Binding Path=SrcImage}"
HorizontalAlignment="Center"
Width="300"
Height="225" />
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<GridView
Grid.Row="1"
x:Name="secondGridView"
ItemsSource="{Binding Path=SecondInputFileList}"
Margin="10,10,10,10"
SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<Image
Source="{Binding Path=SrcImage}"
HorizontalAlignment="Center"
Width="120"
Height="90" />
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
<ContentPresenter
x:Name="LandscapeLayout"
Visibility="Collapsed">
<ContentPresenter.ContentTemplate>
<!-- Collapsed ContentPresenter in Windows 8.1 is roughly equivalent to x:Defer in Windows 10 -->
<DataTemplate>
<Grid>
<!-- For landscape we-re using columns -->
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- Note that for vertical scrolling we're using ListViews with custom ItemsPanels.
In Windows 10 this might be simpler with just reconfigured GridViews. -->
<ListView
x:Name="firstGridView"
ItemsSource="{Binding Path=FirstInputFileList}"
Margin="10,10,10,10"
SelectionMode="None">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid
Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Image
Source="{Binding Path=SrcImage}"
HorizontalAlignment="Center"
Width="300"
Height="225" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView
Grid.Column="1"
x:Name="secondGridView"
ItemsSource="{Binding Path=SecondInputFileList}"
Margin="10,10,10,10"
SelectionMode="None">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid
Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Image
Source="{Binding Path=SrcImage}"
HorizontalAlignment="Center"
Width="120"
Height="90" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
</Grid>
</Page>
I have the following ListView in my xaml layout:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<TextBlock Text="{StaticResource AppName}" Style="{StaticResource TitleTextBlockStyle}"/>
</StackPanel>
<StackPanel Grid.Row="1">
<ListView x:Name="lstStatus">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12">
<Image Source="ms-appx:///Assets/Logo.png" Margin="12" Width="150" Height="150"></Image>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Path='Fullname'}" Style="{StaticResource ListViewItemSubheaderTextBlockStyle}"></TextBlock>
<TextBlock Text="{Binding Path='FormattedCreationTime'}" TextWrapping="WrapWholeWords"></TextBlock>
<TextBlock Text="{Binding Path='Text'}" Style="{StaticResource ListViewItemContentTextBlockStyle}" TextWrapping="WrapWholeWords" Margin="12"></TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Grid>
However, I met two problems:
The list is not scrollable when it is longer than the screen.
The TextBlocks does not wrap at all although I already set TextWrapping.
I am pretty new to Windows Phone design. Please tell me where did I do wrong.
The StackPanel takes as much space as it needs. As the ListView grows, the StackPanel expands to allow it to grow, hence you cannot scroll to see the items you don't see on the screen.
Put the ListView in a Grid or limit the Height of the StackPanel.
<Grid Grid.Row="1">
<ListView x:Name="lstStatus">
...
Similar problem occurs in your ItemTemplate, and the fix is also similar.
<DataTemplate>
<Grid Margin="12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image ...
<StackPanel Grid.Column="1">
<TextBlock ....
</StackPanel>
</Grid>
</DataTemplate>
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.
I have troubles with binding data to a Listbox to dynamically create ExpanderView.
I have used Listboxes in my Code before, so I'm not sure if the binding is really the problem. Am I setting the contents of ExpanderView wrong?
My Code so far in XAML:
<ListBox x:Name="Newsticker_Listbox">
<ListBox.ItemTemplate>
<DataTemplate>
<toolkit:ExpanderView Header="{Binding}" Expander="{Binding}" ItemsSource="{Binding}"
HeaderTemplate="{StaticResource CustomHeaderTemplate}"
ExpanderTemplate="{StaticResource CustomExpanderTemplate}"
ItemTemplate="{StaticResource CustomItemTemplate}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
the Templates:
<!--newsfeed templates-->
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="CustomHeaderTemplate">
<TextBlock Text="{Binding Title}" />
</DataTemplate>
<DataTemplate x:Key="CustomExpanderTemplate">
<Image Source="{Binding Subtitle}" />
</DataTemplate>
<DataTemplate x:Key="CustomItemTemplate">
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
I'm binding with
ObservableCollection<news> newslist = new ObservableCollection<news>();
//populate
Newsticker_Listbox.ItemsSource = newslist;
news is a really simple object, it just stores some strings, which can be read out by news.Title, news.Subtitle etc
I've used the example from http://www.geekchamp.com/articles/expand-and-collapse-expanderview-inside-data-bound-listbox-via-code as basic for my code, I've just simplified it for my cause (mabye too much?)
Help is very appreciated, thank you all in advance
EDIT
This code works so far, but why does the solution with templates not work?
<ListBox x:Name="Newsticker_Listbox">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<toolkit:ExpanderView>
<toolkit:ExpanderView.Header>
<TextBlock Text="{Binding Titel}" />
</toolkit:ExpanderView.Header>
<toolkit:ExpanderView.Expander>
<TextBlock Text="{Binding Untertitel}" />
</toolkit:ExpanderView.Expander>
<toolkit:ExpanderView.Items>
<TextBlock Text="{Binding Text}" />
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Remove your Header={Binding} and Expander={Binding} XAML code. It is overriding your custom HeaderTemplate and ExpanderTemplate.
You bound the Header and the Expander to the context of the application, which it doesn't really understand, so the binding resolved itself to nothing, so your ExpanderView displays nothing.
I am having trouble getting my long list selector to work properly. When the list is taller than the screen, the long list selector stays static and I am unable to scroll to see all of the items.
Any thoughts?
<phone:PivotItem Header="{Binding Path=LocalizedResources.ApplicationsHeader, Source={StaticResource LocalizedStrings}}" x:Name="applicationsPivotItem">
<Grid x:Name="applications" Grid.Row="1">
<phone:LongListSelector x:Name="MainLongListSelector" ItemsSource="{Binding Items}" SelectionChanged="MainLongListSelector_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
</phone:PivotItem>
Fix the Height of the Grid
<Grid x:Name="applications" Grid.Row="1" Height="400">
...long list code...
</Grid>
I had a similar issue where my panoramaItem was defines as below:
<phone:PanoramaItem>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<phone:LongListSelector x:Name="SpeciesList" Grid.Row="0">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,-6,0,12">
<TextBlock Text="{Binding PrimaryName}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
</phone:PanoramaItem>
By changing the RowDefinition to use * instead of Auto, my scrolling issues was resolved! As shown below.
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
I had the same issue with the LongListSelector not scrolling. In the end it was OpacityMask="White" that was set in LongListSelector that was causing the issue as per this question
Also as per Mattias I didn't have to set a specific Height, as long as the grid RowDefinition was set to *.