Xamarin forms align each texts on their baselines - c#

This is what I am currently having on screen with my texts:
Is there a way to align the 152 and bar? Also the same with..
15 MinutesRemaining and x?
Here is my current code:
<Grid>
<Frame Style="{StaticResource FrameStyle}">
<Grid Style="{StaticResource TellyGridStyle}">
<Frame Grid.Column="0" BackgroundColor="Green" Margin="0,10,10,10" Padding="20">
<Label Text="1" Style="{StaticResource TeamLabelStyle}" />
</Frame>
<Grid Grid.Column="1" Style="{StaticResource AutoGridStyle}">
<Grid Grid.Column="0" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label TextColor="Green" Text="152" FontSize="72" VerticalTextAlignment="End" />
<Label Grid.Column="1" VerticalTextAlignment="End" Text="bar" TextColor="Blue" FontSize="54" />
</Grid>
<Grid Grid.Column="1" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label Grid.Row="0" TextColor="Lime" IsVisible="false" Text="Low Pressure Warning" FontSize="40" />
<Label Grid.Row="1" Text="Evacuation Confirmed" IsVisible="false" FontSize="33" Style="{StaticResource LabelStyle}" />
</Grid>
<BoxView Grid.Row="1" Grid.ColumnSpan="4" HeightRequest="20" BackgroundColor="Gray" HorizontalOptions="FillAndExpand" />
<Grid Grid.Row="2" Grid.ColumnSpan="3" Style="{StaticResource RadioGridStyle}">
<Label Grid.Column="0" Text="15" FontSize="33" Style="{StaticResource LabelStyle}" />
<Label Grid.Column="1" Text="MinutesRemaining" FontSize="25" Style="{StaticResource LabelStyle}" />
<Label Grid.Column="2" Text="X" Style="{StaticResource LabelStyle}" />
</Grid>
</Grid>
<StackLayout Grid.Column="2" Style="{StaticResource VerticalStackLayoutStyle}" Padding="30,40,30,40" BackgroundColor="Red">
<Label Text="R" TextColor="{StaticResource EcbWhite}" FontSize="42" HorizontalTextAlignment="Center" Style="{StaticResource LabelStyle}" />
<Label Text="Evacuate" TextColor="{StaticResource EcbWhite}" Style="{StaticResource LabelStyle}" />
</StackLayout>
</Grid>
</Frame>
</Grid>
Static Resources:
<Style x:Key="BaseStyle" TargetType="View">
<Setter Property="Margin" Value="0" />
</Style>
<Style x:Key="StackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="Spacing" Value="0" />
</Style>
<Style x:Key="HorizontalStackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource StackLayoutStyle}">
<Setter Property="Orientation" Value="Horizontal" />
<Setter Property="HorizontalOptions" Value="Start" />
<!-- <Setter Property="Spacing" Value="10" />-->
</Style>
<Style x:Key="VerticalStackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource StackLayoutStyle}">
<Setter Property="Orientation" Value="Vertical" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
</Style>
<Style x:Key="GridStyle" TargetType="Grid" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="RowSpacing" Value="0" />
<Setter Property="ColumnSpacing" Value="5" />
</Style>
<Style x:Key="FrameStyle" TargetType="Frame" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
<Setter Property="VerticalOptions" Value="FillAndExpand" />
<Setter Property="BackgroundColor" Value="{DynamicResource themeColor}" />
</Style>
<Style x:Key="LabelStyle" TargetType="Label">
<Setter Property="VerticalTextAlignment" Value="End" />
<Setter Property="TextColor" Value="Black" />
</Style>
<Style x:Key="TeamLabelStyle" TargetType="Label">
<Setter Property="FontSize" Value="24" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="VerticalTextAlignment" Value="End" />
<Setter Property="TextColor" Value="{StaticResource MsaWhite}" />
</Style>
<!--<ColumnDefinitionCollection x:Key="AutoColumns">
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</ColumnDefinitionCollection>-->
<RowDefinitionCollection x:Key="AutoRows">
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
<Style x:Key="TellyGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions" Value="{StaticResource AutoRows}">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AutoGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="EvacuationGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RadioGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
<Setter Property="RowDefinitions">
<Setter.Value>
<RowDefinitionCollection>
<RowDefinition Height="Auto" />
</RowDefinitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ColumnDefinitions">
<Setter.Value>
<ColumnDefinitionCollection>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</ColumnDefinitionCollection>
</Setter.Value>
</Setter>
</Style>
Thanks in Advance!


To avoid the issue that each of your labels vertical (Y / height) size is different due to the fact that different size fonts are being used and to avoid hard-coding the height of those labels, you can combine those labels into one by using FormattedString.
This way, you have one label who's height is calculated by the tallest element (i.e. font) and thus when using YAlign="End" VerticalTextAlignment="End" your text is bottom aligned.
<Grid Grid.Column="0" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
<Label YAlign="End" VerticalTextAlignment="End">
<Label.FormattedText>
<FormattedString>
<Span Text="152" TextColor="Green" FontSize="72" />
<Span Text="bar" TextColor="Blue" FontSize="54" />
</FormattedString>
</Label.FormattedText>
</Label>
</Grid>
Note: If you need to change the discrete elements of the FormattedString just as if they were separate labels, you can assign x:Name, BindingContext, Binding as a Span is a bindable object.
<Span x:Name="barValue" BindingContext="aContext" Text="{Binding BarValue}" TextColor="Green" FontSize="72" />

Related

WPF Optimization

So I have an application that has pages of Buttons. Each page can have up to 100 buttons on it and the User can navigate from page to page. The problem is that each Button calls a number of Converters, the more Buttons on a Page, the longer it takes to switch from one page to another....
I have isolated the problem to the number of Converters (on each Button) commenting out the code in the converters doesn't make any difference so it's not that.....
In the App.xaml defines 'POSButtonContent' defines and 'POSButton' Style
<DataTemplate po:Freeze="True" x:Key="POSButtonContent">
<LocalItemCount:AdornedControl
HorizontalAdornerPlacement="Outside" VerticalAdornerPlacement="Outside"
IsAdornerVisible="{Binding First_Product.Local_Item_Count, Converter={Converters:ShowLocalItemCount}}" AdornerOffsetX="17" AdornerOffsetY="15">
<Button x:Name="POSButton" Style="{StaticResource POS_Button}" >
<Button.IsEnabled>
<MultiBinding Converter="{Converters:DisablePOSButtonConverter}">
<MultiBinding.Bindings>
<Binding />
<Binding Path="DataContext.First_Product.Local_Item_Count" ElementName="POSButton" />
<Binding Path="DataContext.SetLocalStockAvailability" ElementName="Base" />
</MultiBinding.Bindings>
</MultiBinding>
</Button.IsEnabled>
</Button>
<LocalItemCount:AdornedControl.AdornerContent>
<StackPanel HorizontalAlignment="Left">
<Border Background="Green" CornerRadius="2" Width="auto" BorderThickness="1" BorderBrush="Black">
<Label MinWidth="15" Content="{Binding First_Product.Local_Item_Count}" Padding="0.5" FontSize="12" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Center" HorizontalContentAlignment="Center"/>
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Background" Value="Green"/>
<Style.Triggers>
<DataTrigger Value="True">
<DataTrigger.Binding>
<MultiBinding Converter="{Converters:ShowLocalItemCountWarning}">
<Binding Path="First_Product.Local_Item_Count"/>
<Binding Path="First_Product.Min_Local_Item_Count"/>
</MultiBinding>
</DataTrigger.Binding>
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="LocalItemCountStoryboard">
<Storyboard FillBehavior="HoldEnd">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
Duration="0:0:1"
FillBehavior="HoldEnd"
RepeatBehavior="Forever">
<DiscreteColorKeyFrame KeyTime="0:0:0.5" Value="Green"/>
<DiscreteColorKeyFrame KeyTime="0:0:0.5" Value="Red"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="LocalItemCountStoryboard"/>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</StackPanel>
</LocalItemCount:AdornedControl.AdornerContent>
</LocalItemCount:AdornedControl>
</DataTemplate>
<Style x:Key="POS_Button" po:Freeze="True" TargetType="{x:Type Button}" x:Name="POSButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate po:Freeze="True" TargetType="{x:Type Button}">
<Button FontSize="{Binding POS_Button_Style.FontSize}" HorizontalContentAlignment="Center" Padding="2" Foreground="{Binding POS_Button_Style.Foreground}" FontFamily="{Binding POS_Button_Style.TypeFace}" Style="{StaticResource Default}" Command="{Binding DataContext.ButtonCommand, ElementName=Base}" CommandParameter="{Binding}" Margin="3" >
<StackPanel>
<Grid>
<Grid.CacheMode>
<BitmapCache EnableClearType="False"
RenderAtScale="1"
SnapsToDevicePixels="False" />
</Grid.CacheMode>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Viewbox Grid.Row="1" Margin="10" Visibility="{Binding DataContext.ShowButtonText, ElementName=Base}" MaxWidth="{Binding ActualHeight, ElementName=POSButton}" MaxHeight="{Binding ActualHeight, ElementName=POSButton}" x:Name="vb1">
<Image x:Name="ButtonImage" Grid.Row="1" Margin="0"
Source="{Binding ImagePath, TargetNullValue={x:Null}}"
RenderOptions.BitmapScalingMode="HighQuality" HorizontalAlignment="Center" VerticalAlignment="Center"
Stretch="Fill" />
</Viewbox>
<Label Padding="0" HorizontalAlignment="Left" VerticalContentAlignment="Center" Background="Transparent" FontSize="{Binding FontSize, ElementName=displayname}" FontFamily="{Binding FontFamily, ElementName=displayname}" Foreground="{Binding Foreground, ElementName=displayname}" Content="{Binding DataContext.KeyboardBuffer, ElementName=Base}" Grid.Row="1" >
<Label.Visibility>
<MultiBinding Converter="{Converters:KBBufferTextVisibilityConverter}" >
<Binding Path="Source" ElementName="ButtonImage" />
<Binding Path="DataContext.ShowButtonText" ElementName="Base"/>
<Binding Path="LNK_ButtonLinks"/>
</MultiBinding>
</Label.Visibility>
</Label>
<TextBlock x:Name="displayname" Grid.Row="1" TextWrapping="Wrap" TextAlignment="Center" Text="{Binding DisplayName}" >
<TextBlock.Visibility>
<MultiBinding Converter="{Converters:ButtonTextVisibilityConverter}" >
<Binding Path="Source" ElementName="ButtonImage" />
<Binding Path="DataContext.ShowButtonText" ElementName="Base"/>
<Binding Path="LNK_ButtonLinks"/>
</MultiBinding>
</TextBlock.Visibility>
</TextBlock>
</Grid>
<Thumb Visibility="{Binding DataContext.ResizeButtons, ElementName=Base}" VerticalAlignment="Bottom" Margin="0,0,0,0"
DragDelta="OnResizeThumbDragDelta"
DragStarted="OnResizeThumbDragStarted"
DragCompleted="OnResizeThumbDragCompleted">
<Thumb.Style>
<Style TargetType="{x:Type Thumb}" BasedOn="{x:Null}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="resizeVisual" DockPanel.Dock="Right" VerticalAlignment="Bottom">
<Grid.Style>
<Style TargetType="{x:Type Grid}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="SizeNWSE"/>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Canvas Background="White" Width="35" Height="35">
<Path Width="35" Height="35" Stretch="Fill" Fill="#FF000000" Data="F1 M 30.25,58L 18,58L 18,45.75L 22,41.75L 22,50.75L 30,42.75L 33.25,46L 25.25,54L 34.25,54L 30.25,58 Z M 58,45.75L 58,58L 45.75,58L 41.75,54L 50.75,54L 42.75,46L 46,42.75L 54,50.75L 54,41.75L 58,45.75 Z M 45.75,18L 58,18L 58,30.25L 54,34.25L 54,25.25L 46,33.25L 42.75,30L 50.75,22L 41.75,22L 45.75,18 Z M 18,30.25L 18,18L 30.25,18L 34.25,22L 25.25,22L 33.25,30L 30,33.25L 22,25.25L 22,34.25L 18,30.25 Z "/>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</StackPanel>
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then in the View..... is a Grid with a Button in each cell (at ContentPresenter)
<Grid RenderOptions.CachingHint="Cache">
<Grid.CacheMode>
<BitmapCache EnableClearType="False"
RenderAtScale="1"
SnapsToDevicePixels="False" />
</Grid.CacheMode>
<Button Width="1" Height="1" Command="{Binding DataContext.DecoyButtonPress, ElementName=Base}" CommandParameter="Decoy Button Pressed" AttachedProperties:FocusExtension.IsFocused="{Binding DataContext.FocusDecoy, ElementName=Base}" ></Button>
<ItemsControl ItemsSource="{Binding Buttons}" VirtualizingPanel.VirtualizationMode="Recycling"
VirtualizingPanel.IsVirtualizing="True"
ScrollViewer.CanContentScroll="True">
<!-- ItemsPanelTemplate -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.CacheMode>
<BitmapCache EnableClearType="False"
RenderAtScale="1"
SnapsToDevicePixels="False" />
</Grid.CacheMode>
<Grid.Style>
<Style TargetType="{x:Type Grid}">
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding DataContext.IsViewSelected, ElementName=ContentMenu_ViewUI}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="SelectedViewStoryboard">
<Storyboard FillBehavior="Stop">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)"
Duration="0:0:2"
FillBehavior="HoldEnd"
RepeatBehavior="Forever">
<DiscreteColorKeyFrame KeyTime="0:0:0" Value="Red"/>
<DiscreteColorKeyFrame KeyTime="0:0:1" Value="Transparent"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="SelectedViewStoryboard"/>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- ItemContainerStyle -->
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Column" Value="{Binding Column}" />
<Setter Property="Grid.Row" Value="{Binding Row}" />
<!-- Can either use a DataTrigger to determine these values,
or store them on the object itself -->
<Setter Property="Grid.ColumnSpan" Value="{Binding ColumnSpan}" />
<Setter Property="Grid.RowSpan" Value="{Binding RowSpan}" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentPresenter Content="{Binding}" ContentTemplate="{StaticResource POSButtonContent}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
Any ideas on how to optomise the XAML would be appreciated..... Thanks.

Making GridSplitter working across rows

I'm trying to get the GridSplitter to work across the rows in my grid:
However, the RowSpan property doesn't seem to work in case of this control.
How can I get the GridSplitter to work across my grid table and share the column width when moved?
This is my code:
<StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".3*" MinWidth="100" />
<ColumnDefinition Width="2" />
<ColumnDefinition Width="*" MinWidth="400" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Padding" Value="3" />
<Setter Property="Foreground" Value="Silver" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Silver" />
<Setter Property="Background" Value="Black" />
</Style>
</Grid.Resources>
<Border Grid.Column="0">
<TextBlock Text="First Column" />
</Border>
<GridSplitter
Grid.RowSpan="1"
Grid.Column="1"
HorizontalAlignment="Stretch"
ShowsPreview="True" />
<Border Grid.Column="2">
<TextBlock Text="Second Column" />
</Border>
</Grid>
<Grid
Grid.Row="1"
Height="400"
Background="Silver">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".3*" MinWidth="100" />
<ColumnDefinition Width="*" MinWidth="400" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock
FontSize="30"
Foreground="Red"
Text="First Column Content" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock
FontSize="30"
Foreground="red"
Text="Second Column Content" />
</StackPanel>
</Grid>
</Grid>
</StackPanel>

You only have GridSplitter in the first Gird. You could merge the two grids you have into one grid to get the desired result. Here is merged XAML for you to try:
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Padding" Value="3" />
<Setter Property="Foreground" Value="Silver" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Silver" />
<Setter Property="Background" Value="Black" />
</Style>
</Grid.Resources>
<StackPanel Grid.Column="0">
<Border>
<TextBlock Text="First Column" />
</Border>
<TextBlock FontSize="30"
Foreground="Red"
Text="First Column Content" />
</StackPanel>
<GridSplitter Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Stretch"
ShowsPreview="True"
Background="Gray"/>
<StackPanel Grid.Column="2">
<Border>
<TextBlock Text="Second Column" />
</Border>
<TextBlock FontSize="30"
Foreground="red"
Text="Second Column Content" />
</StackPanel>
Also, here is the screenshot of resulting output:
You may also want to refer to this how-to page on MSDN.

Making XAML Grid width full screen

I m creating Windows Phone 8.1 app with Visual Studio Where I m putting XAML grid but could not make full width. If I give width to each column then grid will be not full width in all resolution of Phone
My codes are as below
<ListView Name="lvData" Margin="5,0" HorizontalAlignment="Stretch" Grid.Row="2" BorderBrush="Black"
BorderThickness="1" Foreground="#000" VerticalAlignment="Center">
<ListView.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
</Grid.ColumnDefinitions>
<GridViewHeaderItem Grid.Column="0" x:Uid="_Number" Style="{StaticResource GridViewHeader}" />
<GridViewHeaderItem Grid.Column="1" x:Uid="_Dep" Style="{StaticResource GridViewHeader}" />
<GridViewHeaderItem Grid.Column="2" x:Uid="Arr" Style="{StaticResource GridViewHeader}" />
<GridViewHeaderItem Grid.Column="3" x:Uid="CurrentStatus" Style="{StaticResource GridViewHeader}" />
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
</Grid.ColumnDefinitions>
<GridViewItem Grid.Column="0" Style="{StaticResource GridViewItem}" Content="{Binding Number}"/>
<GridViewItem Grid.Column="1" Style="{StaticResource GridViewItem}" Content="{Binding DepTime}" />
<GridViewItem Grid.Column="2" Style="{StaticResource GridViewItem}" Content="{Binding ArrTime}"/>
<GridViewItem Grid.Column="3" Style="{StaticResource GridViewItem}" Foreground="{Binding Color}" Content="{Binding CurrentStatus}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
My Style
<Style TargetType="GridViewHeaderItem" x:Key="GridViewHeader">
<Setter Property="Background" Value="#48649F"/>
<Setter Property="Foreground" Value="#fff"/>
<Setter Property="Height" Value="40"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
</Style>
<Style TargetType="GridViewItem" x:Key="GridViewItem">
<Setter Property="Foreground" Value="#000"/>
<Setter Property="BorderBrush" Value="#000"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Height" Value="40"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>

Try stretch HorizontalContentAlignment of ListViewItem:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
...
</ListView>

Dynamically change XAML column text

How do I programmatically set border XAML objects?
I can set it in the XAML:
<Border Grid.Column="2" Grid.Row="1">
<TextBlock Text="Typical Code" />
</Border>
Here I have it with a name to set it:
<Border x:Name="Column8Text" Grid.Column="3" Grid.Row="1">
</Border>
This has no effect:
Column8Text.Name = "test";
This is the entire grid im trying to dynamiclly manipulate:
<StackPanel x:Name="GridViewView" >
<Grid x:Name="StaticGridView" Background="WhiteSmoke">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Column5" />
<ColumnDefinition x:Name="Column6" />
<ColumnDefinition x:Name="Column7" />
<ColumnDefinition x:Name="Column8" />
<ColumnDefinition x:Name="Column9" />
<ColumnDefinition x:Name="Column10" />
<ColumnDefinition x:Name="Column11" />
<ColumnDefinition x:Name="Column12" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="Background" Value="White" />
<Setter Property="Padding" Value="5" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="TextBlock.FontSize" Value="16" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="TextBlock.FontWeight" Value="Bold" />
</Style>
</Grid.Resources>
<Border Grid.Column="0" Grid.Row="1">
<TextBlock Text="Item" />
</Border>
<Border Grid.Column="1" Grid.Row="1">
<TextBlock Text="Drawing" />
</Border>
<Border Grid.Column="2" Grid.Row="1">
<TextBlock Text="Typical Code" />
</Border>
<Border x:Name="Column8Text" Grid.Column="3" Grid.Row="1">
</Border>
<Border x:Name="Column9Text" Grid.Column="4" Grid.Row="1">
</Border>
<Border x:Name="Column10Text" Grid.Column="5" Grid.Row="1">
</Border>
<Border x:Name="Column11Text" Grid.Column="6" Grid.Row="1">
</Border>
<Border x:Name="Column12Text" Grid.Column="7" Grid.Row="1">
</Border>
</Grid>
</StackPanel>

This has no effect: Column8Text.Name = "test";
To set any child object's values one cannot simply name the parent and have access to the children.
Each individual child control has to be named to be accessed in code behind.
Otherwise to change the child objects via a parent, one should create a custom control with specific dependency properties tied to the children underneath to facilitate the passage of data to the children.
To complete your example
<Border Grid.Column="2" Grid.Row="1">
<TextBlock Name="tbBorderChild" Text="Typical Code" />
</Border>
Then access it in codebehind as such:
tbBorderChild.Text = "Changed";

Textblocks overlapping each other in XAML

This is what I am trying to obtain:
Name
Date
This is the XAML I have. But in the result, both the texts Name & Date are overlapping each other.
<DataTemplate>
<Grid x:Name="showGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel>
<Grid Height="{Binding widthMA}" Width="{Binding widthMA}">
<Grid Margin="3.5" Background="White">
<Grid VerticalAlignment="Bottom" Background="Black" Height="30">
<TextBlock Text="{Binding strName}" Style="{StaticResource AlbumTitleText}" Grid.Row="0" />
<TextBlock Text="{Binding dateCreated}" Style="{StaticResource ArtistTitleText}" Grid.Row="1" />
</Grid>
</Grid>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>
And the styles AlbumTitleText and ArtistTitleText are here
<Style x:Key="AlbumTitleText" TargetType="TextBlock">
<Setter Property="Foreground" Value="White" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="FontSize" Value="18" />
<Setter Property="FontFamily" Value="Fonts/Gotham-Bold.ttf#Gotham Bold" />
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Margin" Value="10,-2,10,7"></Setter>
</Style>
<Style x:Key="ArtistTitleText" TargetType="TextBlock">
<Setter Property="Foreground" Value="White" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontFamily" Value="Fonts/Gotham-Bold.ttf#Gotham Bold" />
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="Margin" Value="10,7,10,0"></Setter>
</Style>

I think your row definitions are in the wrong place. Try ...
<DataTemplate>
<Grid x:Name="showGrid">
<StackPanel>
<Grid Height="{Binding widthMA}" Width="{Binding widthMA}">
<Grid Margin="3.5" Background="White">
<Grid VerticalAlignment="Bottom" Background="Black" Height="30">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding strName}" Style="{StaticResource AlbumTitleText}" Grid.Row="0" />
<TextBlock Text="{Binding dateCreated}" Style="{StaticResource ArtistTitleText}" Grid.Row="1" />
</Grid>
</Grid>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>

Categories

Resources