I have a ListViewdefined in a Grid like this:
<Border BorderThickness="1" Grid.Row="1" VerticalAlignment="Top" Margin="0,0,0,50" BorderBrush="Gray">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="Test" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ListView
Grid.Row="1"
ItemsSource="{Binding MyItems}"
Padding="40,40,40,40"/>
</Grid>
My problem is that I want the last item of the listview to be 40 pixel away from listView's bottom, but my code is not working, the top padding is ok, but bottom has no effect. That is like adding a blank item on the beginning and the end of the listview but that would be a stupid thing to do.
You can put the ListView inside of another Scrollviewer and pad the ListView itself.
Related
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>
<DataTemplate>
<ScrollViewer>
<Grid>
... same rows and controls 20% of screen
</Grid>
<ListView>
</ListView>
</ScrollViewer>
</DataTemplate>
With this template there are
fixed Grid first
scrollable ListView second
How create template with
scrollable ListView at top
fixed Grid at bottom
?
P.S. There are online or compiled demo different xaml layout/templates?
Don't put a ListView inside a ScrollViewer because you will lose virtualization if you are using it, which will degrade performance significantly.
If you want the Grid to always be visible then use the following:
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListView Grid.Row="0"/>
<Grid Grid.Row="1" Height="100"/> <!-- Set any fixed height -->
</Grid>
</DataTemplate>
If you want the Grid to scroll with the list use a Footer:
<DataTemplate>
<ListView>
<ListView.Footer>
<!-- Set any fixed height -->
<Grid Height="100"/>
</ListView.Footer>
</ListView>
</DataTemplate>
I have a ListView in PivotItem and my pivot contains 3 pivot items. Each Piovt Item contain ListView. I want to disable scrolling on all the ListViews while user changing the Pivot Item swiping left/right. Currently while swiping left/right the pivot item is in changing mode and also my ListView scrolls. I have tried ManipulationStarted and ManipulationCompleted events but it is not working? Is there a way to achieve this? What I want is the same behavior of WP 8.1 email app, while swiping left/right it disables listview view scrolling.
<Pivot Grid.Row="1">
<PivotItem Margin="0" >
<PivotItem.Header>
<TextBlock Text="web" />
</PivotItem.Header>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Margin="19,0,19,15"
Style="{StaticResource PhoneAccentTextSmallStyle}"
Visibility="{Binding CountryFacetCurrentlyShowing,Converter={StaticResource empltyStringToVisibilityConverter}}"
Text="{Binding CountryFacetCurrentlyShowing}"></TextBlock>
<!-- Search List Items -->
<ListView Grid.Row="2" x:Name="grdSearchResults" Width="{Binding ElementName=searchView,Path=ActualWidth}" ItemsSource="{Binding SearchedMembers}"
Visibility="{Binding ElementName=btnGridView,Path=IsEnabled,Converter={StaticResource boolToVisibiliytConverter}}"
LayoutUpdated="grdSearchResults_LayoutUpdated"
SelectedItem="{Binding SelectedMember,Mode=TwoWay}"
SelectionMode="{Binding ListViewMode}"
ItemTemplate="{Binding ItemTemplate}"
ItemContainerStyle="{StaticResource ListViewItemStyle99}">
</ListView>
<!-- Search Grid Items -->
<GridView Grid.Row="2" x:Name="grdSearchResults1" Width="{Binding ElementName=searchView,Path=ActualWidth}" ItemsSource="{Binding SearchedMembers}"
Visibility="{Binding ElementName=btnListView,Path=IsEnabled,Converter={StaticResource boolToVisibiliytConverter}}"
Margin="13,0,13,0" SelectedItem="{Binding SelectedMember,Mode=TwoWay}"
LayoutUpdated="grdSearchResults_LayoutUpdated"
SelectionMode="{Binding ListViewMode}"
ItemContainerStyle="{StaticResource GridViewItemStyle99}"
ItemTemplate="{StaticResource SearchGridItemDataTemplate}">
<!--<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="{Binding DataContext.ItemWidth, Mode=OneWay, ElementName=searchView}"></Setter>
</Style>
</GridView.ItemContainerStyle>-->
</GridView>
<TextBlock Margin="19,10" Text="No matches found." FontSize="16" x:Name="lblNoConten" Foreground="DarkGray" Visibility="{Binding NoContentVisibility}"></TextBlock>
</Grid>
</PivotItem>
<PivotItem Margin="0">
<PivotItem.Header>
<TextBlock Text="local" />
</PivotItem.Header>
</PivotItem>
</Pivot>
Fixed this problem. I was using a default ListView style(which contains nothing new) in my resources and that was causing the problem after removing default style from my resources it works :). Do not know why it was causing the issue.
I have a TextBlock inside a ScrollViewer which resides inside a HubSection. "Summary" binding has a long text so I want it to wrap at the end of the line but it doesn't wrap and the HubSection stretches as wide as the text inside TextBlock. I have tried to set the HorizontalScrollMode to disabled without any success. I also tried putting the TextBlock inside the grid instead of outside it such that it wraps the summary TextBlock. Again this didn't solve my problem.
I can give a width to HubSection but I want my application to work in different resolutions without a problem so I don't want to do that.
I have been trying to find an answer to this problem without any success.
Thanks for your answers in advance.
<HubSection x:Uid="MyHubSection" Header="{Binding Path=DisplayName}" Width="Auto" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
<DataTemplate>
<ScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid x:Name="MyGrid" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="40" />
<RowDefinition Height="Auto" MinHeight="40" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text ="{Binding Path=Summary}" TextWrapping="Wrap" />
<TextBlock Grid.Row="1" TextWrapping="Wrap">
<Run Text="Last Edit Date " />
<Run Text="{Binding Path=LastEditDate}" />
</TextBlock>
</Grid>
</ScrollViewer>
</DataTemplate>
</HubSection>
I have the following XAML code:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="#FFE8E8E8">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,0" >
<TextBlock x:Name="AppName" Text="Agent" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0" Foreground="Black" />
<TextBlock x:Name="PageName" Text="agent audit" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" Height="100" Foreground="Black"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Background="White"/>
<ScrollViewer HorizontalAlignment="Left" Margin="0,0,0,0" Grid.Row="1" VerticalAlignment="Top">
<TextBlock x:Name="auditText" HorizontalAlignment="Left" Margin="0,0,0,0" Grid.Row="1" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Foreground="Black" Padding="10"/>
</ScrollViewer>
</Grid>
When the page comes into view I assign the TextBlock with the contents of an API Call (audit log text), and this gets quite long.
However, currently it cuts off all text below the screen height. I have the TextBlock and ScrollView set to Auto layout height/width.
I can even see the top of the next line of text, when I scroll the rest doesn't appear. Quite hard to screenshot too as you only see the issue when scrolling, and whilst scrolling I can't take a screenshot :/
Any ideas where I'm going wrong?
I've read numerous posts on this site but nothing quite hit what I was after.
Thanks.
This ended up working for me:
<ScrollViewer Height="Auto" Grid.Row="1">
<TextBlock x:Name="auditText" Text="TextBlock"
VerticalAlignment="Top" Foreground="Black" Margin="0,10,0,0" Grid.Row="1" Padding="20" TextWrapping="Wrap">
</TextBlock>
</ScrollViewer>
Setting the ScrollViewer height to AUTO