I have a page with a simple grid (2x2). In one grid on the bottom left corner is another Grid and inside this grid is a ListView bound to a collection. Entries can be added to the collection so the ListView grows in height (height of ListView is set to auto, so that all space available is used).
What I want is, if all available space (from the screen height) is used, scrollbars for the ListView should appear and should be usable. Funny (unfunny) thing is: scrollbars do appear but I cannot use them, I cannot scroll the ListView with the vertical scrollbar that appears when I hover the ListView.
It works, when I set the height of the ListView to a fixed value, but I don't want it that way, because then it doesn't use all the available space on the screen.
This is the XAML of the page (I removed some parts for demonstration purposes) :
<Page
x:Class="Qooli.TimeTracker.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Qooli.TimeTracker"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
...
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Name="spAddEntry" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="30">
<TextBlock Text="Add new entry:" Name="lblAddNewEntry" />
...
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="30">
<TextBlock Text="Allocated time:" Name="lblAllocatedTime" />
...
</StackPanel>
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Margin="30">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="Daily overview:" Name="lblDailyOverview" Grid.Row="0" Grid.Column="0" />
<ListView Name="lvTimeEntries" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left"
Height="Auto"
MinHeight="100"
VerticalAlignment="Top"
MinWidth="300"
SelectionMode="Single"
ItemsSource="{x:Bind ViewModel.TimeEntriesAdvancedCollectionView, Mode=OneWay}"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.IsVerticalRailEnabled="True"
ScrollViewer.VerticalScrollMode="Enabled">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="local:TimeEntry">
<Grid Background="{Binding Type, Converter={StaticResource TimeEntryTypeColorConverter}}" Padding="5">
<Grid.RowDefinitions>
<RowDefinition Height="200"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{x:Bind Time, Mode=OneWay}" Style="{StaticResource TitleTextBlockStyle}"
MinWidth="60"
MaxWidth="60"
Grid.Row="0" Grid.Column="0">
</TextBlock>
<TextBlock Text="{x:Bind Title, Mode=OneWay}" Style="{StaticResource BodyTextBlockStyle}" Margin="5,0,0,0"
MinWidth="100"
MaxWidth="100"
Grid.Row="0" Grid.Column="1">
</TextBlock>
<Button Name="btnEditTimeEntry" Grid.Row="0" Grid.Column="2" Margin="5,5,5,5">
<SymbolIcon x:Name="edit" Symbol="Edit"/>
</Button>
<Button Name="btnDeleteTimeEntry" Grid.Row="0" Grid.Column="3" Margin="5,5,5,5">
<SymbolIcon x:Name="delete" Symbol="Delete"/>
</Button>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListView>
</Grid>
<StackPanel Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="30">
<TextBlock Style="{StaticResource summaryTextStyle}" Text="Start time:" Name="lblDayStartTime" />
...
</StackPanel>
</Grid>
</Page>
Can someone spot why it is behaving this way?
You need to set the height of the second row to "*" for both grids.
Related
I have window which initially gets loaded with a list of item, based on list view item selection, I have to populate data in different user controls in the same window. I have one model which is common across all the user controls but they have separate user controls. Everytime when the data is filled , models gets initialized and data grid remains empty in the UI, even though the data is present at the back end.
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="17*"/>
</Grid.ColumnDefinitions>
<Border BorderThickness="1" BorderBrush="Black" Margin="5,5,5.4,5.2" Grid.ColumnSpan="2">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" Margin="0 3 0 3" BorderThickness="1" BorderBrush="Gray">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="300"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="310"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<!--ROW 2-->
<GroupBox Grid.Row="1" Grid.Column="0" Grid.RowSpan="3" Header="Rule Name" >
<ListBox ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Visible"
BorderBrush="Gray" BorderThickness="1"
Style="{x:Null}"
Name="lstSuggestedRule" SelectionMode="Single"
ItemsSource="{Binding RuleMetadata.SuggestedRuleList, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
SelectedItem="{Binding RuleMetadata.SelectedRule,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Margin="0 3 0 3" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Width="350" HorizontalAlignment="Stretch" Text="{Binding Path=ExpressionName}">
</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<interactivity:Interaction.Triggers>
<interactivity:EventTrigger EventName="SelectionChanged">
<interactivity:InvokeCommandAction Command="{Binding RuleSuggestionSelectionCommand}"
CommandParameter="{Binding Path= SelectedItems, ElementName=lstSuggestedRule}" />
</interactivity:EventTrigger>
</interactivity:Interaction.Triggers>
</ListBox>
</GroupBox>
<GroupBox Grid.Row="1" Grid.Column="1" Header="Rule MetaData" Grid.ColumnSpan="2" >
<DockPanel>
<local:RuleSuggestionMetaData />
</DockPanel>
</GroupBox>
<GroupBox Grid.Row="2" Grid.Column="1" Header="Rule Script" Grid.ColumnSpan="2">
<DockPanel>
<local:RuleSuggestionAvalonEditor HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Visibility="{Binding ElementName=lstSuggestedRule,Path=SelectedItem,Converter={StaticResource SuggestionVisibilityConverter},ConverterParameter= VB}" Margin="0,10,0,10.2" Width="537" />
<local:RuleTreeView HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Visibility="{Binding ElementName=lstSuggestedRule,Path=SelectedItem,Converter={StaticResource SuggestionVisibilityConverter} ,ConverterParameter= XML}" />
</DockPanel>
</GroupBox>
</Grid>
</Border>
<Grid Grid.Row="1" Grid.Column="1" Margin="0 0 10 3" HorizontalAlignment="Right">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="3" Width="100"
Height="25" Margin="0,3,0,3"
ToolTip="Click to Cancel Operation"
Content="Close" Command="{Binding CancelRuleSuggestion}"
CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}}" >
</Button>
</Grid>
</Grid>
</Border>
</Grid>
This is the grid structure, where on listbox selection item, I have to populate data into user control ,user control also uses same view model
I try to align the TextBlocks to the left.
The button should take the rest of the area (Up to the picture).
How can I do this?
This is a UWP / C# App.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid VerticalAlignment="Center" HorizontalAlignment="Left">
<Button Background="Transparent" HorizontalAlignment="Stretch">
<StackPanel HorizontalAlignment="Left">
<TextBlock x:Name="TextBlock1" TextWrapping="Wrap" Text="Name1"/>
<TextBlock x:Name="TextBlock2" TextWrapping="Wrap" Text="Name2" />
</StackPanel>
</Button>
</Grid>
<StackPanel Grid.Column="1" Grid.Row="0" HorizontalAlignment="Right">
<Button Height="50" Width="50" Background="Transparent" Click="Button_Click">
<Image x:Name="ImageFavorit" Source="/Assets/Stern/VGrau64.png"/>
</Button>
</StackPanel>
</Grid>
Firstly you should replace your ColumnDefinitions to this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
And secondly remove HorizontalAlignment="Left" from your Grid then you can achieve to what you want:
<Grid VerticalAlignment="Center">
<Button Background="Transparent" HorizontalAlignment="Stretch">
...
Also it seems that you need to set VerticalAlignment="Center" of your StackPanel too:
<StackPanel Grid.Column="1" Grid.Row="0"
HorizontalAlignment="Right" VerticalAlignment="Center">
Update: Based on your comment that you want the text on the left side Set the HorizontalContentAlignment="Left" of the Button:
<Button Background="Transparent" HorizontalAlignment="Stretch"
HorizontalContentAlignment="Left">
I want to use a dataTemplate to show a video source from four different cameras. My datatemplate is something like this:
<DataTemplate x:Key="MultiViewTemplate">
<Grid x:Name="MultiViewGrid" ShowGridLines="True" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="GridVideo1" Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Image x:Name="imageMultiVideoStreaming1" Margin="1" Source="/app;component/Images/No_image_available.png" />
</Grid>
<Grid x:Name="GridVideo2" Grid.Column="1" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Image x:Name="imageMultiVideoStreaming2" Margin="1" Source="/app;component/Images/No_image_available.png" />
</Grid>
<Grid x:Name="GridVideo3" Grid.Column="0" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Image x:Name="imageMultiVideoStreaming3" Margin="1" Source="/app;component/Images/No_image_available.png" />
</Grid>
<Grid x:Name="GridVideo4" Grid.Column="1" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Image x:Name="imageMultiVideoStreaming4" Margin="1" Source="/app;component/Images/No_image_available.png" />
</Grid>
</Grid>
</DataTemplate>
...
<Grid x:name"MainGrid" >
<ContentControl x:Name="CameraContainer" Content="{Binding}" ContentTemplate=Value="{StaticResource MultiViewTemplate}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</Grid>
At the beginning, when I run the application, every grid should show the image No_image_avaiable.png. It works correcty. After that, I try to connect with the cameras and each video source should be shown in GridVideo1, GridVideo2...
If I do this in code-behind I can see the video from camera 1...
MainGrid.Children.Add(VideoStreamingGrid1)
but I would like to do something like this:
...GridVideo1.Children.Add(VideoStreamingGrid1)
...GridVideo2.Children.Add(VideoStreamingGrid2)
...GridVideo3.Children.Add(VideoStreamingGrid3)
...GridVideo4.Children.Add(VideoStreamingGrid4)
How can I do that?
Thanks.
I have ItemDetailPage.xaml with FlipView, inside of DataTemplate i have Grid with come columns. One of columns contains StackPanel with some controls.
Example:
<FlipView.ItemTemplate>
<DataTemplate>
<UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
<ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1">
<Grid Margin="120,0,20,20" x:Name="richTextColumns">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="400" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="400" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="2" Grid.Row="1" Margin="0,0,0,10" x:Name="ContentPanel">
<TextBlock FontSize="22" FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap" />
<Image x:Name="image" Width="200" Margin="0,10,0,10" Stretch="UniformToFill" Source="{Binding Image}"/>
<StackPanel Orientation="Horizontal" Margin="0,0,0,5">
<RichTextBlock x:Name="InformationOriginalName" Width="250"
Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False">
<Paragraph>
<Run FontWeight="SemiLight" Text="{Binding EvaInformation.OriginalName}"/>
</Paragraph>
</RichTextBlock>
</StackPanel>
</StackPanel>
....
</Grid>
</ScrollViewer>
</UserControl>
</DataTemplate>
</FlipView.ItemTemplate>
How to stretch ContentPanel to FullScreen and hide all different controls, including Back button and title of page?
I have a DockPanel with two Grids (DockPanel.Dock="Right/Left"). In the left i have a TreeView and in the right i have some TextBoxes. If i resize my window the panels resize proportinal.
My problem is, if i write long text in a TextBox the TextBox enlarge and hide my left DockPanel instead of a break the text.
I have set minwidth of the left DockPanel to '300' and set TextWrapping in the TextBoxes to 'wrap' but nothing helps.
Source:
<Grid Background="#FF58ACFC" Name="main">
<DockPanel>
<Grid DockPanel.Dock="Right" Margin="0,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="200" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
<RowDefinition Height="26"/>
<RowDefinition Height="26"/>
<RowDefinition Height="60" />
<RowDefinition Height="26"/>
<RowDefinition />
</Grid.RowDefinitions>
<Label Content="Titel:" Grid.Row="0"/>
<TextBox Grid.Row="1" IsReadOnly="False">
<Label Content="Frage:" Grid.Row="2"/>
<TextBox Grid.Row="3" TextWrapping="Wrap" IsReadOnly="False" AcceptsReturn="True">
<Label Content="Antwort:" Grid.Row="4"/>
<TextBox Grid.Row="5" IsReadOnly="False" TextWrapping="Wrap" />
</Grid>
<Grid DockPanel.Dock="Left" Margin="5,0,0,0">
<DockPanel>
<Grid DockPanel.Dock="Left">
<DockPanel LastChildFill="True">
<Grid DockPanel.Dock="Top" Height="26">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Content="Kategorie" Grid.Column="0"/>
<Button Grid.Column="1" BorderThickness="0" HorizontalAlignment="Right">
</Grid>
<TreeView HorizontalAlignment="Stretch" VerticalAlignment="Stretch"Padding="0,0,15,0" />
</DockPanel>
</Grid>
<Grid DockPanel.Dock="Right">
<DockPanel LastChildFill="True">
<Grid DockPanel.Dock="Top" Height="26">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Content="Lernkarten" Grid.Column="0"/>
<Button Grid.Column="1" Width="26" Click="ButtonAddItem_Click">
</Grid>
<ListView />
</DockPanel>
</Grid>
</DockPanel>
</Grid>
</DockPanel>
</Grid>
That's pretty much why Dockpanels are useless :-)
I suggest using Grid..