ListView is placed inside UserControl which is set in parent XAML to asterix "*" height.
I want to use ListView with possibility to scroll items, when there are items that exceed ListView. It should work for different size of window.
It works fine when I set Grid's RowDefinitions with fixed integer, but when I try to use asterix "*" ScrollViewer disables.
I also tried to bind and update RowDefinition's height via some code behind in overriden MeasureOverride method, but it didn't work as expected.
Here is code inside my UserControl:
<Grid x:Name="ContentArea"
Background="{StaticResource MixerBackground}">
<Grid.RowDefinitions>
<RowDefinition Height="{x:Bind ListViewHeight}" />
</Grid.RowDefinitions>
<ListView
ItemsSource="{x:Bind ViewModel.Source,Mode=TwoWay}"
CanDragItems="True"
CanReorderItems="True"
AllowDrop="True"
SelectionMode="Single"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:Track">
<Grid
Background="LightGray"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
BorderBrush="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<TextBlock
Text="{x:Bind Id}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontSize="24"
Margin="20,5,20,5"/>
<Grid
Background="Black"
Width="500"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="1">
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I expect to get the ScrollViewer working correctly, but ListView stay at the old size or scroll bar is disabled - depending on Height value.
Is there any way to achieve dynamically resizing ListView with scroll?
Edit
Here is parent Page XAML code which is loaded into Frame via Light MVVM framework:
<Grid
x:Name="ContentArea">
<Grid
Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="*" />
<RowDefinition Height="300" />
</Grid.RowDefinitions>
<maineditor:MainEditorMenuControl x:Name="ProjectMenu" />
<maineditor:MainEditorWorkspaceControl x:Name="Workspace" Grid.Row="1"/>
<maineditor:MainEditorMixerControl x:Name="Mixer" Grid.Row="2" />
</Grid>
</Grid>
Edit 2
I think the problem may be connected with MVVM template I've created with Windows Template Studio plugin for Visual Studio. If I try to recreate minimal solution from scratch with all properties 1:1 as in my app it works in fresh project, but not in mine.
How to dynamically update ListView height while keeping the ScrollViewer enabled?
If you want make RowDefinition height same as the ListView, you could give the ListView a name and use {Binding ElementName=MyListView,Path=ActualHeight}syntax to bind both height property.
<Grid x:Name="ContentArea">
<Grid.RowDefinitions>
<RowDefinition Height="{Binding ElementName=MyListView,Path=ActualHeight}" />
</Grid.RowDefinitions>
<ListView
Name="MyListView"
CanDragItems="True"
CanReorderItems="True"
AllowDrop="True"
Loaded="MyListView_Loaded"
SelectionMode="Single"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListView.ItemTemplate>
<DataTemplate >
<Grid
Background="LightGray"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
BorderBrush="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<TextBlock
Text="{Binding}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontSize="24"
Margin="20,5,20,5"/>
<Grid
Background="Black"
Width="500"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="1">
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
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>
I have a GridView that uses a DataTemplate to provide a UI so users can manage subscriptions to a dataservice. The DataTemplate contains text and an image and also a Button and a ToggleButton. Using this on Mobile and Desktop the user can tap or click the buttons within the control. On Desktop you can even Tab inside the control and select the buttons. However on Xbox I am only able to focus on each DataTemplate item, I cannot get it to focus on the buttons inside, is there a way around this without enabling Mouse Mode on the Xbox?
<DataTemplate x:Key="DataTemplate1">
<Grid Background="#33FFFFFF">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image HorizontalAlignment="Center" Height="100" VerticalAlignment="Center" Width="80" Source="{Binding TEAMID, Converter={StaticResource uriConverter}}" Grid.RowSpan="3"/>
<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="{Binding TEAMNAME}" VerticalAlignment="Top" Grid.Column="1"/>
<Button Content="Unsubscribe" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" Tag="{Binding TEAMID}" Tapped="Button_Tapped"/>
<ToggleButton x:Name="subscribe_tb" Content="" HorizontalAlignment="Center" FontFamily="Segoe MDL2 Assets" Tag="{Binding TEAMID}" IsChecked="{Binding isPinned}" Grid.Row="3" Grid.Column="1" Unchecked="subscribe_tb_Unchecked" Checked="subscribe_tb_Checked"/>
</Grid>
</DataTemplate>
Solved by changing the Style of the GridView.ItemContainerStyle:
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="IsFocusEngagementEnabled" Value="True"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</GridView.ItemContainerStyle>
I have some DataTemplate for Windows GridView in corresponding platform. In this template there should be picture with some text. This text should have background, but only for readibility purposes. I want to have this background to be transparent so image could be seen through it. However, when I set background in format #4C000000, nothing happens and it stays solid black.
<DataTemplate x:Key="GridViewPlayerDataTemplate">
<Grid Height="100" Width="100" >
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Image x:Name="ImageRoleImage" Stretch="UniformToFill" Source="{Binding Guess.PlayerRole.ImageSource , Mode=OneWay, Converter={StaticResource ImageConverterHou}}" />
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Opacity="0.1" Grid.RowSpan="1" Background="#4C000000">
<TextBlock x:Name="TextBlockPlayerName" Opacity="1" TextWrapping="Wrap" Text="{Binding Actor.Name}" TextAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="1" Grid.RowSpan="1" Background="#4C000000">
<TextBlock x:Name="TextBlockPlayerGuessedRole" TextWrapping="Wrap" Text="{Binding Guess.PlayerRole.Name}" TextAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Grid>
</DataTemplate>
I tried to create this pure Windows Store application and transparency works just fine.
Can anyone tell me something about this strange behaviour and/or how to fix it?
I have this following code on windows store app project.
<Grid x:Name="minutesGrid" Height="1000" Width="1024" Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="50"/>
<RowDefinition Height="100"/>
<RowDefinition Height="750"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="1" Background="White" Height="50" Orientation="Vertical" >
<TextBlock x:Name="minutesTitle" Text="" FontFamily="Segoe UI Semilight" FontWeight="SemiLight" FontSize="24" TextAlignment="Center" Foreground="{StaticResource BrandBrush}" Margin="0,15,0,0"></TextBlock>
</StackPanel>
<StackPanel Grid.Row="2" Background="White">
<ScrollViewer HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled" VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Visible" Height="100">
<TextBlock x:Name="minutesDesc" Text="" FontFamily="Segoe UI Semilight" FontWeight="SemiLight" FontSize="24" Foreground="{StaticResource BrandBrush}" Margin="15,15,0,0" TextWrapping="WrapWholeWords"></TextBlock>
</ScrollViewer>
</StackPanel>
<StackPanel Grid.Row="3" Background="White">
<PdfViewer:SfPdfViewerControl x:Name="minutesPDF" Canvas.ZIndex="1"/>
</StackPanel>
</Grid>
And when i load the pdf it doesnt show the scrollbars or lets me do a scroll either with mousewheel or on tablet with fingers.
This is how i load my file, that is displayed correctly.
var datapdf = await objService.DownloadFileService("teste.pdf",minutes.gappFile._id);
PdfLoadedDocument pdf = new PdfLoadedDocument(Convert.FromBase64String(datapdf));
await minutesPDF.LoadDocumentAsync(pdf);
minutesPDF.ViewMode = Syncfusion.Windows.PdfViewer.PageViewMode.Normal;
Do i need to add something else?
I think that you've to remove the StackPanel and assign the Grid.Row to the PDFViewer ..
SF Ref :
http://help.syncfusion.com/winrt/pdfviewer/getting-started
Since StackPanel has a default behavior to grow in one direction, scroll of the control included in the StackPanel will not be initiated without the height property being set to it.
Please find the following link which illustrates the reason “Why the control cannot be scrolled inside StackPanel without setting its height property?”
How can I get ScrollViewer to work inside a StackPanel?
Code Snippet: XAML
<Grid x:Name="minutesGrid" Height="1000" Width="1024" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="50"/>
<RowDefinition Height="100"/>
<RowDefinition Height="750"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="1" Background="White" Height="50" Orientation="Vertical" >
<TextBlock x:Name="minutesTitle" Text="" FontFamily="Segoe UI Semilight" FontWeight="SemiLight" FontSize="24" TextAlignment="Center" Foreground="{StaticResource BrandBrush}" Margin="0,15,0,0"></TextBlock>
</StackPanel>
<StackPanel Grid.Row="2" Background="White">
<ScrollViewer HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled" VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Visible" Height="100">
<TextBlock x:Name="minutesDesc" Text="" FontFamily="Segoe UI Semilight" FontWeight="SemiLight" FontSize="24" Foreground="{StaticResource BrandBrush}" TextWrapping="WrapWholeWords"/>
</ScrollViewer>
</StackPanel>
<StackPanel Grid.Row="3" Background="White">
<PdfViewer:SfPdfViewerControl x:Name="minutesPDF" Height="750" Canvas.ZIndex="1"></PdfViewer:SfPdfViewerControl>
</StackPanel>
</Grid>