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">
...
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 listbox which I can successfully update with the data but now I want to access two specific textblocks which I want to collapse and make the other visible. here is my xaml:
<ListBox Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" Name="myPM_MListBox" Margin="-5,0,-5,0" SelectionChanged="myPMListBox_SelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,0" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Margin="5,0,0,0" Background="#FF009E49" BorderThickness="1" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" Text="Message Date" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FFFFFFFF" FontWeight="Normal" />
</Border>
<Border Grid.Row="0" Grid.Column="1" Margin="0,0,5,0" Background="#FFEFEFEF" BorderThickness="1" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" x:Name="PMMessagePubDate" Text="{Binding shdMsgPublishTime}" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF000000" FontWeight="Normal" />
</Border>
<Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,0,5,0" Background="#FFEFEFEF" BorderThickness="1,1,1,0" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" x:Name="PM_MLimitedBody" Text="{Binding shdMessageText}" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF000000" FontWeight="Normal" />
</Border>
<Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,0,5,0" Background="#FFEFEFEF" BorderThickness="1,0,1,1" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" x:Name="PM_MFullBody" Text="Show more..." FontSize="16" HorizontalAlignment="right" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="Blue" FontWeight="Normal" Tapped="ShowFullBody_Tap" />
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I want to hide PM_MLimitedBody textblock and show the PM_MFullBody textblock for the ShowFullBody_Tap event handler I have. But seems like I can't access the Visibility properties of these textblok in my .cs file. is there a way for me to access these textblock's visibility property in my .cs file?
You can use the sender of ShowFullBody_Tap will be the TextBox that defines that event. You can then use VisualTreeHelper.GetParent(...) to get the Border and then the Grid and then look at Grid.Children to find the other borders with their textboxes.
How to get the slider's thumb position within the Style? I want to show the actual value at the position of the thumb. This would be possible by changing the width of the following textblock accordingly to the value. But how to get the position of the thumb?
<TextBlock Grid.Column="0" Width="THUMB POSITION" HorizontalAlignment="Right" Grid.Row="0" Text="{Binding Path=Value, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
The full style is shown here:
<Style x:Key="MyCustomStyleForSlider" TargetType="{x:Type Slider}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto" MinWidth="{TemplateBinding MinWidth}"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="{Binding Path=Value, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Path=Minimum, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
<TextBlock Grid.Column="2" Grid.Row="1" Text="{Binding Path=Maximum, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
<TickBar Grid.Column="1" x:Name="TopTick" Visibility="Visible" Fill="LightGray" Placement="Top" Height="6" Grid.Row="1"/>
<TickBar Grid.Column="1" x:Name="BottomTick" Visibility="Collapsed" Fill="Green" Placement="Bottom" Height="4" Grid.Row="0"/>
<Border x:Name="TrackBackground" BorderThickness="1" CornerRadius="1" Margin="5,0" VerticalAlignment="Center" Height="4.0" Grid.Row="1" >
<Canvas Margin="-6,-1">
<Rectangle Visibility="Visible" x:Name="PART_SelectionRange" Height="4.0" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Stroke="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" StrokeThickness="1.0"/>
</Canvas>
</Border>
<Track x:Name="PART_Track" Grid.Row="1" Grid.Column="1">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButtonStyle}" BorderBrush="Transparent" Background="Transparent" Foreground="Transparent" Command="{x:Static Slider.DecreaseLarge}"/>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButtonStyle}" Background="Transparent" Foreground="Transparent" BorderBrush="Transparent" Command="{x:Static Slider.IncreaseLarge}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<!--<Thumb x:Name="Thumb" Background="Black"/>-->
<Thumb x:Name="Thumb" Style="{StaticResource CustomThumbForSlider}" Background="Black"/>
</Track.Thumb>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I found the solution now. I use the ActualWidth of the decrease RepeatButton to get the position of the thumb. I only need a converter because of some offset but it works without any code behind.
Code:
<TextBlock Grid.Column="1" Grid.Row="0" TextAlignment="Right" Foreground="#3B3833"
HorizontalAlignment="Left" Width="{Binding Path=ActualWidth, ElementName=leftToggle,
Converter={StaticResource SliderConverter}, ConverterParameter=140}" Text="{Binding
Path=Value, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
Preview: