Related
I'm struggling with performance in my WPF application.
I have a ListView i populate with some buttons, which contain a bunch of TextBlocks with bindings.
I managed to get Virtualization going, so it seems the same whether its 20 or 2000 i load.
The problem is between 5 and 20. It simply appears that rendering a bunch of somewhat complicated User Controls, is simply too much for basic sub-par hardware.
This is how my Buttons/UserControls in my ListView looks ->
ListViewSample
I feel like WPF should be able to render this on sup-par hardware.
This is the xaml for the ListView:
<ListView ItemsSource="{Binding ButtonModels, IsAsync=True}"
Margin="0"
x:Name="ButtonsListView"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.IsContainerVirtualizable="True"
VirtualizingPanel.VirtualizationMode="Recycling"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto"
SnapsToDevicePixels="True"
Background="Transparent"
BorderThickness="0">
<ListView.Resources>
<Style TargetType="ScrollBar">
<Setter Property="LayoutTransform">
<Setter.Value>
<ScaleTransform CenterX="0" CenterY="0"
ScaleX="3" ScaleY="3" />
</Setter.Value>
</Setter>
</Style>
</ListView.Resources>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<local:UniformGridPanel IsItemsHost="True" VerticalAlignment="Top" Height="Auto" Rows="4" Columns="{Binding Columns}" Margin="0">
</local:UniformGridPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Button Height="117" Width="Auto"
Margin="6,0,6,0"
x:Name="MasterButton"
Click="MasterButton_Click"
Visibility="{Binding IsVisible, Converter={StaticResource BoolToVis}}"
Template="{StaticResource ProductButtonTemplate}"
Padding="0">
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
Here is the xaml for the Button template:
<ControlTemplate TargetType="{x:Type Button}" x:Key="ProductButtonTemplate">
<UserControl>
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="{Binding HeaderBrush}" CornerRadius="3,3,0,0">
<TextBlock VerticalAlignment="Center" FontSize="12"
Text="{Binding DisplayName}"
Foreground="{Binding FontIsWhite, Converter={StaticResource BoolToFontColour}}"
FontFamily="{StaticResource DefaultRegular}"
Padding="8,0,0,0"/>
</Border>
<Border Grid.Row="1" Background="{StaticResource LightGrey}" CornerRadius="0,0,4,4" BorderBrush="{StaticResource BorderGrey}" BorderThickness="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0"
FontSize="12" TextTrimming="CharacterEllipsis" Text="Nr.:"
FontFamily="{StaticResource DefaultFont}"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
Foreground="{StaticResource Black}"
Padding="8,0,0,0"/>
<TextBlock Grid.Row="1" Grid.Column="0"
FontSize="10" TextTrimming="CharacterEllipsis" Text="{Binding Combinations}"
FontFamily="{StaticResource DefaultFont}"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
Foreground="{StaticResource Black}"
Padding="8,0,0,0"/>
<TextBlock Grid.Row="2" Grid.Column="0"
FontSize="10" TextTrimming="CharacterEllipsis" Text="{Binding SizeAndColour}"
FontFamily="{StaticResource DefaultFont}"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
Foreground="{StaticResource Black}"
Padding="8,0,0,0"/>
<Grid Grid.Row="3" Grid.Column="0"
Width="24" Height="24"
VerticalAlignment="Center" HorizontalAlignment="Left"
Margin="8,0,0,0"
Visibility="{Binding ShowStockValue, Converter={StaticResource BoolToVis}}">
<Ellipse Fill="{Binding StockStatus, Converter={StaticResource EnumToBrush}}" Stroke="{StaticResource LightGrey}" StrokeThickness="0.1">
</Ellipse>
<TextBlock Text="{Binding Stock}"
Foreground="{StaticResource White}"
FontSize="9"
FontFamily="{StaticResource DefaultFont}"
VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<TextBlock Grid.Row="0" Grid.Column="1"
FontSize="12" TextTrimming="CharacterEllipsis" Text="{Binding ProductNr}"
Foreground="{StaticResource Black}"
VerticalAlignment="Center" HorizontalAlignment="Right"
FontFamily="{StaticResource DefaultFont}"
Padding="0,0,8,0"/>
<Label Grid.Row="3" Grid.Column="1" FontSize="13"
Padding="0,0,8,8"
Content="{Binding Price}"
Foreground="{StaticResource Black}"
FontWeight="Bold"
FontFamily="{StaticResource DefaultFont}"
VerticalContentAlignment="Bottom" HorizontalContentAlignment="Right"
ContentStringFormat="{}{0:#,0.00}" />
</Grid>
</Border>
</Grid>
</UserControl>
</ControlTemplate>
tldr; I'm looking for performance tips on how to make this render faster. And this is BEFORE i reach a size in the ListView where my virtualization kicks in (Which works flawlessly)
Thanks in advance!
I managed to find a high performance solution - it just wasn't what i would expect to be better performing.
So instead of having one ListView with a binding, changing the data in the binding and repopulating the Listview, i just spawn a ListView for every collection i have.
It seems weird to me, that having a bunch of ListViews and just collapsing and showing them is more effcient, but it performs absolutely flawlessly.
I have a ListView in my page. and i using of ScrollHeader with Mode="Fade"
And for my ItemsPanelTemplate i use of WrapPanel control.
So, my listview items with ScrollHeader content in the form of horizontally aligned together.
I want to be ScrollHeader content be top and stretch horizontally and listview items below ScrollHeader content and form be vertically
My code:
<ListView ScrollViewer.VerticalScrollMode="Auto" ScrollViewer.HorizontalScrollMode="Disabled">
<ListView.Header>
<controls:ScrollHeader VerticalAlignment="Top" Mode="Fade">
<StackPanel>
<Grid Margin="20,20,20,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Ellipse x:Name="imageProfile" extensions:Mouse.Cursor="Hand" Width="75" Opacity=".90">
<Ellipse.Fill>
<ImageBrush ImageSource="{Binding UserDetail.ProfilePicUrl}"/>
</Ellipse.Fill>
</Ellipse>
<Grid Margin="10,0,0,0" Grid.Column="1" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid VerticalAlignment="Top" Margin="5,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel x:Name="panelPostCount" Opacity=".70" HorizontalAlignment="Center">
<TextBlock x:Name="txblblCountPost" Text="{Binding UserDetail.MediaCount, FallbackValue='0'}" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock x:Name="txblblPosts" Text="Posts" Margin="5,0,5,0" FontSize="13" FontWeight="Bold" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel x:Name="panelFollowers" Opacity=".70" Grid.Column="1" Orientation="{Binding Orientation, ElementName=panelPostCount, Mode=TwoWay}" HorizontalAlignment="Center" Tapped="panelFollowers_Tapped">
<TextBlock Text="{Binding UserDetail.FollowerCount, FallbackValue='0'}" FontSize="{Binding FontSize, ElementName=txblblCountPost, Mode=OneWay}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Followers" Margin="5,0,5,0" FontSize="{Binding FontSize, ElementName=txblblPosts, Mode=OneWay}" FontWeight="Bold" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Opacity=".70" Grid.Column="2" Orientation="{Binding Orientation, ElementName=panelPostCount, Mode=TwoWay}" HorizontalAlignment="Center">
<TextBlock Text="{Binding UserDetail.FollowingCount, FallbackValue='0'}" FontSize="{Binding FontSize, ElementName=txblblCountPost, Mode=OneWay}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Following" Margin="5,0,5,0" FontSize="{Binding FontSize, ElementName=txblblPosts, Mode=OneWay}" FontWeight="Bold" VerticalAlignment="Center"/>
</StackPanel>
</Grid>
<Button x:Name="btnEditProfile" Margin="5,10,5,0" Grid.Row="1" extensions:Mouse.Cursor="Hand" HorizontalAlignment="Stretch" Content="Edit Profile" BorderThickness=".5" Opacity=".65" Style="{ThemeResource ButtonRevealStyle}" Click="btnEditProfile_Click"/>
</Grid>
</Grid>
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="15,10,0,0">
<FontIcon Opacity=".80" Visibility="{Binding UserDetail.IsVerified, Converter={StaticResource StringNullOrEmptyToVisiblityConverter}, FallbackValue='Collapsed'}" Glyph="" VerticalAlignment="Center" FontSize="15"/>
<TextBlock Text="{Binding UserDetail.FullName}" Margin="5,0,0,0" Visibility="{Binding UserDetail.FullName, Converter={StaticResource StringNullOrEmptyToVisiblityConverter}, FallbackValue='Collapsed'}" Opacity=".65" FontWeight="Bold"/>
</StackPanel>
<TextBlock Text="{Binding UserDetail.Biography}" Visibility="{Binding UserDetail.Biography, Converter={StaticResource StringNullOrEmptyToVisiblityConverter}, FallbackValue='Collapsed'}" TextWrapping="Wrap" TextAlignment="Left" Opacity=".65" HorizontalAlignment="Left" Margin="15,5,0,0"/>
<HyperlinkButton Content="{Binding UserDetail.ExternalUrl}" Visibility="{Binding UserDetail.ExternalUrl, Converter={StaticResource StringNullOrEmptyToVisiblityConverter}, FallbackValue='Collapsed'}" NavigateUri="{Binding UserDetail.ExternalUrl}" Opacity=".75" HorizontalAlignment="Left" Margin="15,5,0,0"/>
<Grid Height="1" Background="White" Opacity=".10" Margin="10,15,10,0"/>
<Grid Margin="35,10,35,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<FontIcon x:Name="btnGridView" Grid.Column="0" extensions:Mouse.Cursor="Hand" Opacity=".80" Glyph="" Foreground="{ThemeResource SystemAccentColor}" Tapped="btnGridView_Tapped"/>
<FontIcon x:Name="btnSingleView" Grid.Column="1" extensions:Mouse.Cursor="Hand" Opacity=".80" Glyph="" Tapped="btnSingleView_Tapped"/>
<FontIcon Grid.Column="2" extensions:Mouse.Cursor="Hand" Opacity=".80" Glyph=""/>
</Grid>
</StackPanel>
</controls:ScrollHeader>
</ListView.Header>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<controls:WrapPanel />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<templates:InstaMediaTenplate />
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Margin" Value="0,15,0,0"/>
<Setter Property="Padding" Value="0"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
I found two ways to accomplish this.
The first is to restyle the ListView to stack the header and items.
<ListView ScrollViewer.VerticalScrollMode="Auto" ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.Template>
<ControlTemplate TargetType="ListView">
<Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
<StackPanel>
<ContentPresenter Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"/>
<ItemsPresenter Padding="{TemplateBinding Padding}"/>
</StackPanel>
</ScrollViewer>
</Border>
</ControlTemplate>
</ListView.Template>
</ListView>
It's important to have the ItemsPresenter not bind the Header property to the header of the ListView.
The second it to change your layout to have the ScrollViewer and header outside of the ListView and using a FadeHeaderBehavior like such
<ScrollViewer ScrollViewer.VerticalScrollMode="Auto" ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<interactivity:Interaction.Behaviors>
<behaviors:FadeHeaderBehavior x:Name="FadeBehavior"/>
</interactivity:Interaction.Behaviors>
<StackPanel>
<StackPanel x:Name="Header" Loaded="Header_Loaded">
<!-- Header content here -->
</StackPanel>
<ListView>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListView>
</StackPanel>
</ScrollViewer>
Due to a weird issue with binding the HeaderElement property you need to set it when the header element is loaded
private void Header_Loaded(object sender, RoutedEventArgs e)
{
FadeBehavior.HeaderElement = (UIElement)sender;
}
I developed a wpf-app with C# in Visual Studio 2017.
When deploying the software on the target devices (55" NEC Touchscreens, Resolution 1920x1080) the buttons I designed will disappear when the app launches, while the rest of the MainWindow stays in place. I set in <Window> tag Height="1080" Width="1920". When testing the software on my 1920x1080 screen on my desktop (22") the buttons were in place.
<Button Style="{StaticResource FlatButtonStyle}" Click="QuickGuide_Click" Name="QuickGuide" Background="#253135" Margin="375,531,1362,375">
<TextBlock Text="Quick Guide" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="xyz" FontSize="12" Margin="0,59,0,58"/>
</Button>
I have four Buttons, all with just different positions.
This is the whole XAML:
<Window x:Class="Startup.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Prometheus" Height="1080" Width="1920"
WindowState="Maximized"
WindowStyle="None" ResizeMode="NoResize"
WindowStartupLocation="CenterScreen"
>
<Window.Background>
<ImageBrush ImageSource="Resource/background_img.png"></ImageBrush>
</Window.Background>
<Grid Margin="12">
<Grid Margin="10,4,-10,361" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="Start" HorizontalAlignment="Right" Margin="0,10,0,0" VerticalAlignment="Top" Width="101" RenderTransformOrigin="-0.013,0.15" Name="GetEventsBtn" Click="GetEvents" Height="34" IsDefault="True" TabIndex="2" Visibility="Hidden" />
<TextBlock HorizontalAlignment="Left" Margin="76,68,0,0" TextWrapping="Wrap" Text="Hi" VerticalAlignment="Top" FontFamily="" Height="60" Width="613" Foreground="#FFE0D2D2" FontSize="48"/>
<TextBlock HorizontalAlignment="Left" Margin="76,133,0,0" TextWrapping="Wrap" Text="Please choose one option below to get started quickly." VerticalAlignment="Top" FontFamily="" Height="46" Width="499" Foreground="#FFE0D2D2" FontSize="20"/>
</Grid>
<Button Style="{StaticResource FlatButtonStyle}" Click="QuickGuide_Click" Name="QuickGuide" Background="#253135" Margin="375,531,1362,375">
<TextBlock Text="Quick Guide" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12" Margin="0,59,0,58"/>
</Button>
<Button Style="{StaticResource FlatButtonStyle}" Click="PlanAMeeting_Click" Name="PlanAMeeting" Margin="170,531,1576,375">
<TextBlock Grid.Row="1" Text="Plan a meeting" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12"></TextBlock>
</Button>
<Button Style="{StaticResource FlatButtonStyle}" Click="CreateAMeeting_Click" Name="CreateAMeeting" Margin="375,319,1362,587">
<TextBlock Grid.Row="1" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12"> Create a new <LineBreak></LineBreak> meeting for now</TextBlock>
</Button>
<Button Style="{StaticResource FlatButtonStyle}" Click="StartAMeeting_Click" Name="StartAMeeting" Margin="170,319,1576,587">
<TextBlock Grid.Row="1" TextWrapping="Wrap" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12">Start a scheduled<LineBreak></LineBreak> meeting</TextBlock>
</Button>
<Grid MaxHeight="200" MaxWidth="600" Margin="1147,-306,39,306" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions >
<RowDefinition Height="60" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<TextBlock Name="GR1Z1" Foreground="White" FontSize="16" FontWeight="Bold" Grid.Row="1" Text="Please wait while loading..."></TextBlock>
<TextBlock Name="GR1Z2" Foreground="White" Grid.Row="2"></TextBlock>
<TextBlock Name="GR1Z3" Foreground="White" Grid.Row="3"></TextBlock>
<TextBlock Name="GR1Z4" Foreground="White" Grid.Row="4"></TextBlock>
<TextBlock Name="GR1Z5" Foreground="White" Grid.Row="5"></TextBlock>
</Grid>
<Grid MaxHeight="200" MaxWidth="600" Margin="1147,96,39,306">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<TextBlock Name="GR2Z1" Grid.Row="1" Foreground="White" FontSize="16" FontWeight="Bold"></TextBlock>
<TextBlock Name="GR2Z2" Grid.Row="2" Foreground="White"></TextBlock>
<TextBlock Name="GR2Z3" Grid.Row="3" Foreground="White"></TextBlock>
<TextBlock Name="GR2Z4" Grid.Row="4" Foreground="White"></TextBlock>
<TextBlock Name="GR2Z5" Grid.Row="5" Foreground="White"></TextBlock>
</Grid>
</Grid>
and the style
<Style TargetType="Button" x:Key="FlatButtonStyle">
<Setter Property="Background" Value="#253135"/>
<Setter Property="Foreground" Value="#253135"/>
<Setter Property="Width" Value="150"/>
<Setter Property="Height" Value="150"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderThickness="0"
Background="{TemplateBinding Background}"
CornerRadius="12"
Name="Border">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border" Property="Background" Value="White" />
<Setter TargetName="Border" Property="BorderBrush" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This is just to give you the idea:
I removed all Margin properties, in order to not use an absolute position, but relative positions if you want to achieve a dynamic layout.
I put your left part of the layout into a grid with three rows where the first two are for your headers text, and the last one for the buttons.
In the last row I put another grid with two rows and two columns where each cell contains a buttons
This part of markup corresponds to the next grid after your: <Grid Margin="12">:
<Grid HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="48"
Foreground="#FFE0D2D2"
Text="Hi"
TextWrapping="Wrap" />
<TextBlock
Grid.Row="1"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="20"
Foreground="#FFE0D2D2"
Text="Please choose one option below to get started quickly."
TextWrapping="Wrap" />
<Grid Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button
Name="QuickGuide"
Grid.Row="0"
Grid.Column="0"
Background="#253135"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
Text="Quick Guide"
TextAlignment="Center" />
</Button>
<Button
Name="PlanAMeeting"
Grid.Row="1"
Grid.Column="1"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
Text="Plan a meeting"
TextAlignment="Center" />
</Button>
<Button
Name="StartAMeeting"
Grid.Row="1"
Grid.Column="0"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
TextAlignment="Center"
TextWrapping="Wrap">
Start a scheduled
<LineBreak />
meeting
</TextBlock>
</Button>
<Button
Name="CreateAMeeting"
Grid.Row="0"
Grid.Column="1"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
TextAlignment="Center">
Create a new
<LineBreak />
meeting for now
</TextBlock>
</Button>
</Grid>
</Grid>
I have a WPF WrapPanel that is oriented horizontally. When I add add children like Grid controls, they all have the same height. How can I make different children to have different height? Is it possible to make it without using any third party software? I have tried to implement WPF Masonry, but it had a lot of errors and I gave up on that one.
For example, if my first Grid has 3 rows and the second one has 6 rows, the first one stretches to the height of the second Grid.
This is what I have right now:
And this is what I am trying to achieve:
EDIT:
My XAML:
<WrapPanel Background="White" Height="200">
<Grid Style="{StaticResource grdRate}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" Grid.Column="0" Style="{StaticResource brdRate}">
<Label Content="Content" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="0" Grid.Column="1" Style="{StaticResource brdRate}">
<Label Content="1" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="0" Grid.Column="2" Style="{StaticResource brdRate}">
<Label Content="Content" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="0" Grid.Column="3" Style="{StaticResource brdRate}">
<Label Content="1" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="1" Grid.Column="0" Style="{StaticResource brdRate}">
<Label Content="123" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="1" Grid.Column="1" Style="{StaticResource brdRate}">
<Label Content="123" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="1" Grid.Column="2" Style="{StaticResource brdRate}">
<Label Content="123" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="1" Grid.Column="3" Style="{StaticResource brdRate}">
<Label Content="123" Style="{StaticResource lblRateBold}"></Label>
</Border>
</Grid>
<Grid Style="{StaticResource grdRate}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" Grid.Column="0" Style="{StaticResource brdRate}">
<Label Content="name" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="0" Grid.Column="1" Style="{StaticResource brdRate}">
<Label Content="Details" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="0" Grid.Column="2" Style="{StaticResource brdRate}">
<Label Content="name" Style="{StaticResource lblRateBold}"></Label>
</Border>
<Border Grid.Row="1" Grid.Column="0" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="1" Grid.Column="1" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="1" Grid.Column="2" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="2" Grid.Column="0" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="2" Grid.Column="1" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="2" Grid.Column="2" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="3" Grid.Column="0" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="3" Grid.Column="1" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="3" Grid.Column="2" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="4" Grid.Column="0" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="4" Grid.Column="1" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
<Border Grid.Row="4" Grid.Column="2" Style="{StaticResource brdRate}">
<Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
</Border>
</Grid>
</WrapPanel>
My styles:
<Style TargetType="Border" x:Key="brdRate">
<Setter Property="BorderBrush" Value="White"></Setter>
<Setter Property="BorderThickness" Value="0.5"></Setter>
</Style>
<Style TargetType="Label" x:Key="lblRateBold">
<Setter Property="FontSize" Value="14"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
</Style>
<Style TargetType="Label" x:Key="lblRate">
<Setter Property="FontSize" Value="14"></Setter>
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
<Setter Property="Cursor" Value="Hand"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#40FF00"></Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="Grid" x:Key="grdRate">
<Setter Property="Background" Value="#BDBDBD"></Setter>
<Setter Property="Margin" Value="5"></Setter>
</Style>
How can I make different children to have different height?
What about setting the Height property of the Grid elements that you add to the WrapPanel to some different values?
<WrapPanel x:Name="wp">
<Grid Background="Silver" Height="300" Width="50" />
<Grid Background="Silver" Height="20" Width="50" />
<Grid Background="Silver" Height="150" Width="50" />
</WrapPanel>
Grid grid = new Grid() { Background = Brushes.Silver, Width = 50, Height = 100 };
wp.Children.Add(grid);
Edit:
You probably also want to set the VerticalAlignment property of the Grid to Top in order for it to not stretch vertically:
<Grid Style="{StaticResource grdRate}" VerticalAlignment="Top">
...
Problematic code
<Canvas x:Name="CanvaContainer" Margin="0,0,0,0" Background="Transparent" Height="360" Width="540" MouseMove="CanvaContainer_MouseMove" MouseLeftButtonDown="CanvaContainer_MouseLeftButtonDown" MouseRightButtonDown="CanvaContainer_MouseRightButtonDown">
<Grid x:Name="GridContainer" Background="Transparent" Height="360" Width="540">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="1" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="2" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="3" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="4" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="5" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="6" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="7" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="8" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="9" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="10" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="11" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
</Grid>
</Canvas>
Whole code
<Grid Name="GraphGrid" Background="Transparent" Margin="140,30,0,0" Width="582" Height="620" HorizontalAlignment="Left" VerticalAlignment="Top">
<Border x:Name="CanvasBorder" BorderThickness="1" BorderBrush="Black" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="40,230,0,0" >
<Canvas x:Name="CanvaContainer" Margin="0,0,0,0" Background="Transparent" Height="360" Width="540" MouseMove="CanvaContainer_MouseMove" MouseLeftButtonDown="CanvaContainer_MouseLeftButtonDown" MouseRightButtonDown="CanvaContainer_MouseRightButtonDown">
<Grid x:Name="GridContainer" Background="Transparent" Height="360" Width="540">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="1" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="2" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="3" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="4" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="5" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="6" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="7" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="8" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="9" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="10" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
<Rectangle Grid.Column="11" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"/>
</Grid>
</Canvas>
</Border>
<Border HorizontalAlignment="Left" Height="18" Margin="40,0,0,0" VerticalAlignment="Top" Width="542" BorderBrush="Black" >
<Grid x:Name="gridMonth">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
<ColumnDefinition Width="45" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sSep, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="1" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sOct, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="2" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sNov, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="3" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sDec, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="4" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sJan, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="5" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sFeb, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="6" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sMar, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="7" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sApr, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="8" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sMay, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="9" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sJune, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="10" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sJul, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
<Border Grid.Column="11" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="1" >
<TextBlock Text="{Binding sAug, Source={StaticResource Resources}}" HorizontalAlignment="Center"/>
</Border>
</Grid>
</Border>
<Border BorderBrush="Black" BorderThickness="0" HorizontalAlignment="Left" Height="480" Margin="0,230,0,0" VerticalAlignment="Top" Width="40">
<Grid x:Name="depthLeader">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth0" Text="-0,25m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="1" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth1" Text="-0,5m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="2" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth2" Text="-0,75m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="3" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth3" Text="-1m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="4" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth4" Text="-1,5m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="5" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth5" Text="-2m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="6" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth6" Text="-2,5m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="7" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth7" Text="-3m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="8" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth8" Text="-3,5m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="9" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth9" Text="-4m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="10" BorderBrush="Black" BorderThickness="1,1,0,1" CornerRadius="3">
<TextBlock Name="depth10" Text="-4,5m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border Grid.Row="11" BorderBrush="Black" BorderThickness="1,0,0,1" CornerRadius="3">
<TextBlock Name="depth11" Text="-5m" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</Grid>
</Border>
<Button Margin="20,-10,542,590" Name="nextMonth" Content=">" Background="LightGray" Width="20" Height="20" Click="nextMonth_Click"/>
<Button Margin="0,-10,562,590" Name="previousMonth" Content="<" Background="LightGray" Width="20" Height="20" Click="previousMonth_Click"/>
<Grid x:Name="AirTempGd" Background="Transparent" HorizontalAlignment="Left" Height="175" Margin="10,20,0,0" VerticalAlignment="Top" Width="572"/>
</Grid>
That would be the code I'm working one, I gave it to you all so you will get the context better. So my problem is the mouse enter event is not being called I,ve tried with breakpoint to console output and it's never getting called I don't know why I've also tried other event like MouseDown or MouseLeave and it's not working yet even with the background being transparent I have no clue where's my problem I could use some help.
EDIT
I may be wrong but I think it because it being in another container but I don't know if it's the problem and if it's I don't know how to fix it except removing container but I need them. But it would be stupid if this is the error so I would be surprised.
Reason is your rectangle is missing content. Simple fix is to fill it with transparent color
<Rectangle Fill="Transparent" Grid.Column="0" Height="{Binding ElementName=CanvaContainer, Path=ActualHeight}" MouseEnter="Rectangle_MouseEnter"