WPF Buttons disappear on 55" screen - c#

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>

Related

Stretch TextBlock to all available width

I'm creating UWP application where one of the screens have layout like this:
<ListView>
<ListViewItem>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Ellipse
Width="32"
Height="32"
Margin="6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="LightGray" />
<TextBlock
Grid.Column="1"
Margin="12,6,0,0"
FontSize="20"
Text="Here is Long Name" />
<StackPanel
Grid.Column="2"
Orientation="Horizontal"
HorizontalAlignment="Right">
<Button Width="25" Height="45" BorderThickness="0">-</Button>
<TextBlock
Width="25"
Height="45"
Padding="0,5,0,0"
FontSize="24"
Text="0"
TextAlignment="Center" />
<Button Width="30" Height="45" BorderThickness="0">+</Button>
</StackPanel>
</Grid>
</ListViewItem>
<ListViewItem>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Ellipse
Width="32"
Height="32"
Margin="6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="LightGray" />
<TextBlock
Grid.Column="1"
Margin="12,6,0,0"
FontSize="20"
Text="Short name" />
<StackPanel
Grid.Column="2"
Orientation="Horizontal"
HorizontalAlignment="Right">
<Button Width="25" Height="45" BorderThickness="0">-</Button>
<TextBlock
Width="25"
Height="45"
Padding="0,5,0,0"
FontSize="24"
Text="0"
TextAlignment="Center" />
<Button Width="30" Height="45" BorderThickness="0">+</Button>
</StackPanel>
</Grid>
</ListViewItem>
</ListView>
It looks like this (I'm not allowed to insert image): https://i.stack.imgur.com/Afvn6.png
I want that StackPanel in last column to be on the right side, no matter how long is name. I assume this will be the case if TextBlock stretches to all available width, but it doesn't. How do I fix this?

Add this to you ListView
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>

How to design this site menu style in WPF

I am trying to implement www.devexpress.com menu.
But I do not know what to do to implement the unfolding details below.
this is my source file.
enter link description here
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MenuTest02"
xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="MenuTest02.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="579.8" Width="1600" WindowState="Maximized">
<Window.Resources>
<Style x:Key="styleTopMenu" TargetType="{x:Type Button}">
<Setter Property="FontFamily" Value="Microsoft JhengHei"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Height" Value="Auto"/>
<Setter Property="Width" Value="Auto"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentPresenter Grid.Column="0" Grid.Row="0"
HorizontalAlignment="Center" VerticalAlignment="Center"
x:Name="mnuContent" Margin="0"/>
<Border Grid.Column="1" Grid.Row="0" BorderBrush="Gray"
BorderThickness="0,0,1,0" HorizontalAlignment="Right"
Height="30" VerticalAlignment="Center" Width="1"/>
<!--
<Polyline Name="mnuTriangle" HorizontalAlignment="Center" Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="2" Visibility="Visible"
Points="0,10 10,0 20,10 0,10" Fill="#FF313131"/> -->
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="BlueViolet"/>
<!-- <Setter TargetName="grdProductsSubmenu" Property="Visibility" Value="True"/> -->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- <GridLength x:Key="GridLength1">1195</GridLength> -->
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition x:Name="grdMainDisplay" Width="1195" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- Top border -->
<Border Grid.Row="0" Grid.ColumnSpan="3" Background="#FF4A4A4A" Width="Auto" Height="26"/>
<!-- bottom Line in menu -->
<Border Grid.Row="1" Grid.ColumnSpan="3" Background="Transparent" Width="Auto" Height="1" BorderBrush="Gray" BorderThickness="0,1,0,0" VerticalAlignment="Top" Margin="0,66,0,0"/>
<!-- Top Menu -->
<Grid Grid.Column="1" Grid.Row="1" Height="66" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="images\logo.png" HorizontalAlignment="Right" Height="66"/>
<!--
<Border Grid.Column="2" BorderBrush="Gray" BorderThickness="0,0,1,0" HorizontalAlignment="Right" Height="30" VerticalAlignment="Center" Width="1"/>
<TextBlock Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontSize="18" Text=" Products " />
-->
<Button Grid.Column="2" Content=" Products " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="3" Content=" Free Trials & Demos " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="4" Content=" Buy " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="5" Content=" Support " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="6" Content=" My Account " Style="{StaticResource styleTopMenu}"/>
<Button Grid.Column="7" Content=" About Us " Style="{StaticResource styleTopMenu}"/>
<Image Grid.Column="8" Source="images\cart_blogs_search.jpg" Margin="30,0,0,0" Height="54" HorizontalAlignment="Right"/>
</Grid>
<Grid Grid.Column="1" Grid.Row="1" Margin="0,56,0,0" Height="10" Width="Auto" HorizontalAlignment="Left" VerticalAlignment="Top">
<Polyline x:Name="triProducts" Margin="320,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triFreeTrials" Margin="480,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triBuy" Margin="620,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triSupport" Margin="705,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triMyAccount" Margin="830,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
<Polyline Name="triAboutUs" Margin="950,0,0,0" Grid.Column="0" Grid.Row="1" Points="0,10 10,0 20,10 0,10" Fill="#FF313131" Visibility="Hidden"/>
</Grid>
<Grid Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Margin="0,66,0,0" Height="Auto" Visibility="Hidden"
VerticalAlignment="Top" Background="#FF313131" x:Name="grdProductsSubmenu" Panel.ZIndex="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="{Binding ElementName=grdMainDisplay, Path=Width}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Margin="0,0,0,0" Grid.Column="1" HorizontalAlignment="Left" Orientation="Horizontal" >
<Grid Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="1" Grid.Column="0" Orientation="Vertical">
<TextBlock Text="Suites" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="BEST VALUE" Margin="0,10,0,10" FontSize="14" Foreground="Orange"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Fill="#FFF88E1D" Height="26" Width="26" RadiusX="3" RadiusY="3"/>
<TextBlock Grid.Column="2" Margin="0" Text="Universal" Foreground="White" FontWeight="Bold"/>
<TextBlock Grid.Column="2" Margin="0,20,0,15" Foreground="DarkGray" FontSize="11" TextWrapping="Wrap"><Run Text="(includes all DevExpress.Netl"/><LineBreak/><Run Text="products in one integrated suite)"/></TextBlock>
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Fill="#FF406EA4" Height="26" Width="26" RadiusX="3" RadiusY="3"/>
<TextBlock Grid.Column="2" Margin="0,0,0,0" Text="Dxperience" Foreground="White" FontWeight="Bold"/>
<TextBlock Grid.Column="2" Margin="0,20,0,0" Foreground="DarkGray" FontSize="11" TextWrapping="Wrap"><Run Text="(includes all DevExpress.Netl"/><LineBreak/><Run Text="Controls along with CodeRush)"/></TextBlock>
</Grid>
<Rectangle VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,50,0,0"
Fill="#FF4C4C4C" Height="50" Width="230" RadiusX="2" RadiusY="2"/>
<TextBlock Margin="0,-50,0,0" FontSize="14"
Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center">
<Run Text="Compare Features"/><LineBreak/><Run Text="and Pricing"/>
</TextBlock>
</StackPanel>
<Border Grid.Row="1" Grid.Column="1" Grid.RowSpan="4" Height="Auto" Width="20" BorderBrush="Gray" BorderThickness="1,0,0,0" Margin="20,0,0,0"/>
<StackPanel Grid.Row="1" Grid.Column="2" Orientation="Vertical">
<TextBlock Text=".NET Products" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="INDIVIDUAL PLATFORMS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="WinForms" FontSize="14" Foreground="White"/>
<TextBlock Text="ASP.NET" FontSize="14" Foreground="White"/>
<TextBlock Text="MVC" FontSize="14" Foreground="White"/>
<TextBlock Text="WPF" FontSize="14" Foreground="White"/>
<TextBlock Text="Windows 10 Apps" FontSize="14" Foreground="White"/>
<TextBlock Text="CROSS-PLATFORM" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="Reporting" FontSize="14" Foreground="White"/>
<TextBlock Text="Document Automatoin" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="2" Orientation="Vertical" Margin="220,24,0,0">
<TextBlock Text="ENTERPRISE TOOLS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="Report Server" FontSize="14" Foreground="White"/>
<TextBlock Text="Analytics Dashboard" FontSize="14" Foreground="White"/>
<TextBlock Text="FRAMEWORKS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="eXpressApp Framework" FontSize="14" Foreground="White"/>
<TextBlock Text="CODE-DEBUG-REFACTOR" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="CodeRush for Visual Studio" FontSize="14" Foreground="White"/>
</StackPanel>
<Border Grid.Row="1" Grid.Column="3" Grid.RowSpan="4" Height="Auto" Width="20" BorderBrush="Gray" BorderThickness="1,0,0,0" Margin="20,0,0,0"/>
<Grid Grid.Row="1" Grid.Column="4">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical">
<TextBlock Text="HTML JS Products" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="HYBRID APPS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="DevExtreme Moboile" FontSize="14" Foreground="White"/>
<TextBlock Text="DevExtreme Web" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Vertical">
<TextBlock Text="Xamarin.Forms" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="UI CONTROLS" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="Free Data Grid" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="2" Orientation="Vertical">
<TextBlock Text="iOS" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="NATIVE" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="DataExplorer" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="2" Grid.Column="2" Orientation="Vertical">
<TextBlock Text="Testing Tools" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="WEB TESTING" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="TestCafe" FontSize="14" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" Orientation="Vertical">
<TextBlock Text="Delphi & C++Builder Products" FontSize="18" Foreground="DarkGray"/>
<TextBlock Text="DELPHI & C++BUILDER" Margin="0,10,0,0" FontSize="14" Foreground="Orange"/>
<TextBlock Text="VCL" FontSize="14" Foreground="White"/>
</StackPanel>
</Grid>
</Grid>
</StackPanel>
</Grid>
<!-- Main Display -->
<Grid Grid.Column="1" Grid.Row="1" Height="Auto" Margin="0,66,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="{Binding ElementName=grdMainDisplay, Path=Width}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center">
<Run Text="(includes all DevExpress.Netl"/>
<LineBreak/>
<Run Text="Controls along with CodeRush)"/>
<LineBreak/>
<Run Text="Some Text..."/>
</TextBlock>
<Path Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" Data="M50.0000011012083,0.5L99.5000021617096,99.5L0.00000040707015,99.5z" Stroke="Black"
StrokeThickness="4" Fill="Yellow"/>
</Grid>
</Grid>

you can set a grid with 4 columsn and 2 rows.
In each of the upper cells you place one of the section names
In the bottom row you place one panel with the details, set its property Grid.ColumnSpan = 4 Grid.Column = 0 grid.row = 1 so it spreads through the whole section. (I think this part is pretty ok in your code) and visibility=visible opacity=1
Then you hook to the on mouse enter for each of the upper elements and when entering, you set the opacity of all the lower panels to 0, but the desired one to 1.
This will show the desired panel with no animation. When you have it working, to achieve the animation you need to use DoubleAnimation and animate the opacity property of the other to zero instead of just setting it.
Please let us know if you find particular problems in your way

How to access the texblocks in a listbox?

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.

Changing Grid Row background color in WPF

I want to set 2 colors to my grid rows, the even ones will have one color and the others will have another.
I dont know ho to even start of doing it.
<ListBox
ItemsSource="{Binding}" x:Name="station_list"
HorizontalAlignment="Left" Height="378" Margin="10,31,0,0"
VerticalAlignment="Top" Width="570" SelectedIndex="0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="Stations_Template">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="First Name: " />
<TextBlock Grid.Column="1" Text="{Binding Path=sname}" />
<TextBlock Grid.Column="2" Text="Last Name: " />
<TextBlock Grid.Column="3" Text="{Binding Path=mahoz}" />
<CheckBox Grid.Column="4" Content="Is Active?"
IsEnabled="False"
IsChecked="{Binding Path=isactive}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Use Rectangles to fill the rows first, then add data to them.
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Fill="AliceBlue" />
<TextBlock Grid.Row="0" Text="Row 1" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="1" Fill="AntiqueWhite" />
<TextBlock Grid.Row="1" Text="Row 2" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="2" Fill="AliceBlue" />
<TextBlock Grid.Row="2" Text="Row 3" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="3" Fill="AntiqueWhite" />
<TextBlock Grid.Row="3" Text="Row 4" HorizontalAlignment="Center"/>
</Grid>
Edit:
If you're loading an unknown amount of items, then i think you need something like an itemscontrol to load them in. You can then use the alternationcount and triggers to handle the alternating color.
<ItemsControl ItemsSource="{Binding DataList}" AlternationCount="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="FooBar" Margin="0,0,0,10">
</Grid>
<DataTemplate.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="Blue" TargetName="FooBar"/>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="Red" TargetName="FooBar"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Background="Cyan" />
<Border Grid.Row="2" Grid.Column="1" Background="Red" />
<Border Grid.Row="1" Background="Black" />
<Border Grid.Row="1" Background="Black" />
<Border Grid.Row="2" Background="Orange" />
<Border Grid.Row="0" Grid.Column="1" Background="Green" />
<TextBlock Grid.ColumnSpan="2" Grid.Row="1" Text="Here is some more text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Grid.ColumnSpan="2" Text="Here is some text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Grid.ColumnSpan="2" Grid.Row="2" Text="Here is even more text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Window>
![enter image description here][1]
[1]: http://i.stack.imgur.com/LX9X8.png

Get thumb position of slider from XAML / Slider Template

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:

Categories