My UWP application has ListView with dynamic contents. I want to enable ScrollView when it's height reaches to the end of device height it runs(desktop/mobile). I don't want to set height/maximum height of ListView. Because it should display as it is.
I have tried like below. But it is not working. It works only if specify the height of ListView.
<Grid HorizontalAlignment="Stretch" >
<Grid.RowDefinitions >
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ListView x:Name="ItemListView" Margin="0,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="Auto" >
<!--ListView ItemTemplate to fill-->
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Padding" Value="0" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width=".8*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.RowSpan="2">
<TextBlock Text="{Binding SerialNum}" TextAlignment="Center" />
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="0" >
<TextBlock Text="{Binding XX}" TextAlignment="Center" />
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="2" Orientation="Vertical" >
<TextBlock Text="{Binding YY}" TextAlignment="Center" />
<TextBlock x:Name="tb_list_date" HorizontalAlignment="Center" Text="{Binding ZZ}" TextAlignment="Center" />
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="3">
<TextBlock Text="{Binding AA}" TextAlignment="Center" />
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="4" Grid.RowSpan="2" VerticalAlignment="Center" HorizontalAlignment="Center" >
<TextBlock Text="{Binding BB}" TextAlignment="Center"/> </StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
The problem is that the Grid.RowDefinition is set to Auto height. This lets the controls in the row to use any height they need. This causes the ListView to stretch beyond the boundaries of the page and because its height is actually the full height of the list, it does not scroll (but you can't see the overflow).
To fix this, change the Grid.RowDefinition Height to *. This will give the control all available space in the Grid but not more than that:
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
...
</Grid>
Related
I am using Syncfusion's SfDataGrid instead of standard one, but this question is more about XAML, not the control itself, I think.
So, I have a window with DataGrid. If there is for example 60 records, then the window gets really tall. I want the window not to change its size at all. And really don't know why it's happening.
This is my XAML:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Margin="10,0,10,0" Grid.Row="0" DataContext="{Binding Info}">
<TextBlock Text="Amount:"/>
<sf:CurrencyTextBox Value="{Binding Amount}" Margin="0,0,0,10"/>
<!-- some other controls -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Style="{StaticResource LeftLabel}"
Text="Count:"/>
<sf:UpDown Grid.Column="1" Grid.Row="0" Margin="0,0,0,5"
Value="{Binding Count}"/>
<TextBlock Grid.Column="0" Grid.Row="1" Style="{StaticResource LeftLabel}"
Text="Year count:"/>
<sf:UpDown Grid.Column="1" Grid.Row="1"
Value="{Binding YearCount}"/>
</Grid>
</StackPanel>
<Button Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,10,10,5"
Content="Simulate >>"
Command="{Binding SimulateCommand}"/>
</Grid>
<!-- This is right part of the window with datagrid -->
<DockPanel Grid.Column="1">
<WrapPanel DockPanel.Dock="Top">
<TextBlock Margin="10" Text="Total amount:" />
<TextBlock Text="{Binding TotalAmount"/>
</WrapPanel>
<!-- and the datagrid -->
<sf:SfDataGrid AutoGenerateColumns="False"
AllowDeleting="False"
AllowEditing="False"
IsReadOnly="False"
AllowGrouping="False"
AllowFiltering="False"
ItemsSource="{Binding History}">
<sf:SfDataGrid.Columns>
<sf:GridDateTimeColumn DisplayBinding="{Binding Date}" MappingName="PaymentDay" HeaderText="Date"/>
<sf:GridCurrencyColumn DisplayBinding="{Binding Amount}" MappingName="PayAmount" HeaderText="Amount"/>
</sf:SfDataGrid.Columns>
</sf:SfDataGrid>
</DockPanel>
</Grid>
So what is wrong with it?
I have a grid(user-control) as follows with rows 1:5 being an Expander which holds a ListView, however my attempts to get the Vertical scrollbar for the ListView within the Expander have not been successful.
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="*"></RowDefinition> <!--Expander with ListView-->
<RowDefinition Height="*"></RowDefinition> <!--Expander with ListView-->
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
The Expander with the ListView is as below, I also attempted enclosing the Expander within a ScrollViewer but then the sizing of the collapsed header takes up all the space
<Expander IsExpanded="True"
Background="#1F4762"
BorderBrush="#1F4762"
Foreground="#FFEEEEEE"
Grid.Row="1"
Visibility="{qc:Binding '$P.View.Count > 0 ? Visibility.Visible: Visibility.Collapsed', P={Binding AListCVS}}"
BorderThickness="1,1,1,0">
<Expander.Header>
<TextBlock FontWeight="Bold"
VerticalAlignment="Center"
Margin="5"
FontSize="14"
Width="200">
<Run Text="A Listers : " />
<Run Text="{Binding AListCVS.View.Count, Mode=OneWay}"></Run>
</TextBlock>
</Expander.Header>
<Expander.Content>
<ListView
HorizontalContentAlignment="Stretch"
AlternationCount="2"
Style="{StaticResource aCompareTemplate}"
ItemTemplateSelector="{StaticResource ATemplateSelector}"
x:Name="lview"
ItemsSource="{Binding AListCVS.View}"
Visibility="{Binding }">
</ListView>
</Expander.Content>
</Expander
The list template is as follows
<Style x:Key="aCompareTemplate"
TargetType="ListView">
<!--Control Template-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0"
MinWidth="900"
VerticalAlignment="Center"
Background="#D4E3F4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition MinWidth="200"></ColumnDefinition>
<ColumnDefinition MinWidth="400"></ColumnDefinition>
<ColumnDefinition Width="200*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Column="0"
Height="30">
<TextBlock Text=""
FontWeight="Bold"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextWrapping="Wrap" />
</Border>
<Border Grid.Column="1"
Height="30">
<TextBlock Text=""
FontWeight="Bold"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
<Border Grid.Column="2"
Height="30">
<TextBlock Text="A Data"
FontWeight="Bold"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
<Border Grid.Column="3"
Height="30">
<TextBlock Text="B Data"
FontWeight="Bold"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
</Grid>
<ItemsPresenter Grid.Row="1"></ItemsPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Any pointers are much appreciated.
Usually the problem with Scroll is due to the container in which it is inserted allow infinite size, and therefore it does not appear. Possibly you can correct this by setting a MaxHeight to your Grid.Row, or to your ListView.
Edit.: as was suggested by #FelixD. and as my above comment helped to solve the problem I am putting it here so the question can be marked as resolved.
I am writing a little app in C# for windows 10, and I have a listview as below, which is already in a grid.
However the grid I am adding to the listview doesn't expand out to fill the space, it is just grows as wide as the length of the data contained in the field bound to it. What am I doing wrong? I don't want to use fixed fields, I'd prefer to use a relative proportion of the page width.
Help!
<Grid x:Name="RootGrid" Margin="5" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="FolderMate" Style="{StaticResource SampleHeaderTextStyle}"/>
<Button x:Name="GetFilesAndFoldersButton"
Grid.Row="1"
Grid.Column="0"
Content="Get files and folders"
Click="GetFilesAndFoldersButton_Click"
Margin="0,10,0,10"/>
<TextBlock x:Name="FileInfo"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="3"
VerticalAlignment="Center"
Margin="10"
Foreground="Green"/>
<Button x:Name="ResetButton"
Grid.Row="1"
Grid.Column="5"
Content="reset"
HorizontalAlignment="Right"
Click="ResetButton_Click"
Margin="0,10,10,0"/>
<!--<ScrollViewer VerticalScrollMode="Auto"
VerticalScrollBarVisibility="Auto"
Grid.Row="2"
Grid.ColumnSpan="5"
BorderBrush="Black"
BorderThickness="2"
Background="Chartreuse"
Margin="0,5,0,5">-->
<ListView x:Name="ThisList"
Grid.Row="2"
Grid.ColumnSpan="5"
Background="LightBlue"
Margin="5"
IsItemClickEnabled="True"
ItemClick="ThisList_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<Grid BorderThickness="1" BorderBrush="Red" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="Aquamarine" Grid.Column="0">
<SymbolIcon Symbol="Folder" HorizontalAlignment="Center" Margin="15 0"/>
</Border>
<Border Background="Yellow" Grid.Column="1">
<TextBlock Text="{Binding FName}" Margin="10" />
</Border>
<Border Background="Cyan" Grid.Column="2">
<TextBlock Text="{Binding FTime}" Margin="10"/>
</Border>
<Border Background="Tomato" Grid.Column="3">
<TextBlock Text="{Binding FSize}" HorizontalAlignment="Right" Margin="10"/>
</Border>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!--</ScrollViewer>-->
</Grid>
You need to set the HorizontalContentAlignment inside ListView.ItemContainerStyle for ListViewItem to Stretch.
Your Full XAML For ListView will be like below.
<ListView x:Name="ThisList"
Grid.Row="2"
Grid.ColumnSpan="5"
Background="LightBlue"
Margin="5"
ItemsSource="{Binding data}"
IsItemClickEnabled="True"
ItemClick="ThisList_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<Grid BorderThickness="1" BorderBrush="Red" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="Aquamarine" Grid.Column="0">
<SymbolIcon Symbol="Folder" HorizontalAlignment="Center" Margin="15 0"/>
</Border>
<Border Background="Yellow" Grid.Column="1">
<TextBlock Text="{Binding FName}" Margin="10" />
</Border>
<Border Background="Cyan" Grid.Column="2">
<TextBlock Text="{Binding FTime}" Margin="10"/>
</Border>
<Border Background="Tomato" Grid.Column="3">
<TextBlock Text="{Binding FSize}" HorizontalAlignment="Right" Margin="10"/>
</Border>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
See in the end, How I added ItemContainerStyle Targeting Only ListViewItem.
Final Output will be
Good Luck.
Might be it will helpful for you. I had used like that-
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto">
<StackPanel>
<ListView x:Name="UserMessageList">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local1:MessageModel">
<StackPanel>
//Add your conrole
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</ScrollViewer>
I add items successfully to the listbox but instead normal space between them , they stick together. Can anyone help me solve that problem?
<ListBox Name="mylistbox" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" >
<ListBox.ItemTemplate>
<DataTemplate>
<!--<StackPanel Name="s1">-->
<Grid Name="g1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="30*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding redni2}" FontSize="26" Grid.Row="0" Grid.Column="0"/>
<TextBlock Text="{Binding ime}" FontSize="26" Grid.Row="0" Grid.Column="1"/>
<TextBlock Text="{Binding broj2}" FontSize="26" Grid.Row="0" Grid.Column="2"/>
<TextBlock Text="{Binding ukupno2}" FontSize="26" Grid.Row="0" Grid.Column="3"/>
</Grid>
<!--</StackPanel>-->
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Use ListBox.ItemContainerStyle property. Try this:
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,9.5">
<Grid Name="g1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<TextBlock Text="111" FontSize="26" Grid.Column="0"/>
<TextBlock Text="222" FontSize="26" Grid.Column="1"/>
<TextBlock Text="333" FontSize="26" Grid.Column="2"/>
<TextBlock Text="444" FontSize="26" Grid.Column="3"/>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Hi I see there have been many questions about ListBox and filling the entire space for the DataTemplate but I still cannot get anything to work. What I have is a ListBox and the DataTemplate has a UserControl. How do I get my UserControl to stretch the data to fill the space?
MainWindow XAML snippet:
<ListBox x:Name="ConfiguredItemsList">
<ListBox.ItemTemplate>
<DataTemplate>
<local:ConfiguredItem DataContext="{Binding}" HorizontalContentAlignment="Stretch" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
UserControl XAML snippet:
<UserControl.Resources>
<local:ImagePathConverter x:Key="ImagePathConverter"/>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="75" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" x:Name="NameLabel" Text="Name:" />
<TextBlock Grid.Row="0" Grid.Column="1" x:Name="tbName" Text="{Binding Path=Name}" />
<TextBlock Grid.Row="1" Grid.Column="0" x:Name="DescriptionLabel" Text="Description: " />
<TextBlock Grid.Row="1" Grid.Column="1" x:Name="Description" Text="{Binding Path=Description}" />
<TextBlock Grid.Row="2" Grid.Column="0" x:Name="TimeLabel" Text="Time:" />
<TextBlock Grid.Row="2" Grid.Column="1" x:Name="Time" Text="{Binding Path=ChangeTime, StringFormat={}{0:h:mm tt}}" />
</Grid>
<Border Grid.Column="1" BorderThickness="1" BorderBrush="Black">
<Image Source="{Binding Path=WallpaperInfo, Converter={StaticResource ImagePathConverter}}" />
</Border>
</Grid>
Have you tried to set HorizontalContentAlignment to stretch on list box level?
<ListBox x:Name="ConfiguredItemsList" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<local:ConfiguredItem DataContext="{Binding}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Note: I have set HorizontalContentAlignment property of ListBox instead of Item.