I am using Style Resources for my buttons.
Just wondering what is better to do.
<StackPanel Grid.Row="1">
<Button Content="Create Event" Click="CreateEvent_Click" Style="{StaticResource NavigationButton}" />
<Button Content="Search Event" Click="SearchEvent_Click" Style="{StaticResource NavigationButton}" />
<Button Content="My Events" Click="MyEvents_Click" Style="{StaticResource NavigationButton}" />
</StackPanel>
So, if I have many buttons I will need to write always Style="{StaticResource NavigationButton}"
Or to choose this one:
<StackPanel Grid.Row="1">
<StackPanel.Resources>
<Style TargetType="Button" BasedOn="{StaticResource NavigationButton}" />
</StackPanel.Resources>
<Button Content="Create Event" Click="CreateEvent_Click" />
<Button Content="Search Event" Click="SearchEvent_Click" />
<Button Content="My Events" Click="MyEvents_Click" />
</StackPanel>
Best is to put the styling in the App.xaml under App Resources. This is a better solution then on page because the resource will only by created once (instead of on multiple pages when reused).
Also, you can specify a target type like the following. This way you will not have to reference a certain style the way you did in your example. You just define your style here:
<Application.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Black" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Width" Value="80" />
<Setter Property="Margin" Value="10" />
</Style>
</Application.Resources>
Related
Early today I've asked for help here because my Xamarin App wasn't working like I expected.
After the help about how to change my Action Bar color, I start wondering "why the way it says on tutorials I've found does not work"
EDIT
<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Mobile.XamarinApp.Views"
xmlns:sys="clr-namespace:System;assembly=netstandard"
x:Class="Mobile.XamarinApp.AppShell"
BackgroundColor="{StaticResource Primary}"
Shell.ForegroundColor="{StaticResource Background}"
Shell.TitleColor="{StaticResource Background}">
<!--
The overall app visual hierarchy is defined here, along with navigation.
https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/
-->
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element" ApplyToDerivedTypes="True">
<Setter Property="Shell.Title" Value="App" />
<Setter Property="Shell.BackgroundColor" Value="{StaticResource Background}" />
<Setter Property="Shell.ForegroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.TitleColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.DisabledColor" Value="HotPink" />
<Setter Property="Shell.UnselectedColor" Value="{StaticResource Secondary}" />
<Setter Property="Shell.TabBarBackgroundColor" Value="Red" />
<Setter Property="Shell.TabBarForegroundColor" Value="Blue"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="Green"/>
<Setter Property="Shell.TabBarTitleColor" Value="Yellow"/>
<Setter Property="Shell.FlyoutHeight" Value="400"/>
<Setter Property="Shell.FlyoutWidth" Value="200"/>
</Style>
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
<!--
Default Styles for all Flyout Items
https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyoutitem-and-menuitem-style-classes
-->
<Style Class="teste" TargetType="TabbedPage">
<Setter Property="BackgroundColor" Value="Red"/>
</Style>
<Style Class="FlyoutItemLabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource Accent}"></Setter>
</Style>
<Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor" Value="{StaticResource Primary}"></Setter>
<Setter Property="HeightRequest" Value="50" />
<Setter Property="HorizontalOptions" Value="Start"/>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource Secondary}" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="White" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<!--
Custom Style you can apply to any Menu Item
-->
<Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Accent}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ResourceDictionary>
</Shell.Resources>
<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<Grid BackgroundColor="{StaticResource Secondary}" HeightRequest="56" Padding="10,0,10,0">
<Label Text="Menu"
TextColor="{StaticResource Primary}"
FontAttributes="Bold"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"/>
</Grid>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>
<Shell.FlyoutFooterTemplate>
<DataTemplate>
<StackLayout>
<Label Text="Xaminals"
TextColor="Black"
FontAttributes="Bold"
HorizontalOptions="Center" />
<Label Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{0:MMMM dd, yyyy}'}"
TextColor="Black"
HorizontalOptions="Center" />
</StackLayout>
</DataTemplate>
</Shell.FlyoutFooterTemplate>
<!-- Splash Screen/Start Page -->
<!--<ShellItem Route="loading">
<ShellContent ContentTemplate="{DataTemplate local:LoadingPage}" />
</ShellItem>-->
<!-- SignIn Page -->
<ShellContent Route="SignInPage" ContentTemplate="{DataTemplate local:SignInPage}"/>
<!--
When the Flyout is visible this defines the content to display in the flyout.
FlyoutDisplayOptions="AsMultipleItems" will create a separate flyout item for each child element
https://learn.microsoft.com/dotnet/api/xamarin.forms.shellgroupitem.flyoutdisplayoptions?view=xamarin-forms
-->
<FlyoutItem Title="Browse">
<ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
</FlyoutItem>
<FlyoutItem Title="About">
<ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
</FlyoutItem>
<FlyoutItem Title="Cadastro">
<ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
</FlyoutItem>
<!-- When the Flyout is visible this will be a menu item you can tie a click behavior to -->
<MenuItem Text="Sair" StyleClass="MenuItemLayoutStyle" Clicked="OnSignOutMenuItemClicked">
</MenuItem>
<!--
TabBar lets you define content that won't show up in a flyout menu. When this content is active
the flyout menu won't be available. This is useful for creating areas of the application where
you don't want users to be able to navigate away from. If you would like to navigate to this
content you can do so by calling
await Shell.Current.GoToAsync("//LoginPage");
-->
<!-- Optional Templates
// These may be provided inline as below or as separate classes.
// This header appears at the top of the Flyout.
// https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyout-header
<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<Grid>ContentHere</Grid>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>
// ItemTemplate is for ShellItems as displayed in a Flyout
// https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#define-flyoutitem-appearance
-->
<!--<Shell.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Text="{Binding Title}"
FontAttributes="Italic"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>-->
<!--
// MenuItemTemplate is for MenuItems as displayed in a Flyout
// https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#define-menuitem-appearance
-->
<!--<Shell.MenuItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Text="{Binding Text}"
FontAttributes="Italic"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
</Shell.MenuItemTemplate>-->
While I stand for the configuration of Shell on those 3 lines, it does not work.
<Setter Property="Shell.BackgroundColor" Value="{StaticResource Background}" />
<Setter Property="Shell.ForegroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.TitleColor" Value="{StaticResource Primary}" />
After getting help, the 3 last lines shell config at the header, made it work.
BackgroundColor="{StaticResource Primary}"
Shell.ForegroundColor="{StaticResource Background}"
Shell.TitleColor="{StaticResource Background}"
The question is, am I doing something wrong? Did I miss something?
I just want to change the color of my Tabbar, action bar and etc from my Shell.Resources Dictionary like the tutorials shows us to do.
thanks in advance
You probably have to Target ShellContent type also:
<Style TargetType="ShellContent" BasedOn="{StaticResource BaseStyle}"/>
I'm trying to create a TitleView where the navigation title is centered in the middle of the screen. But have buttons on either or both sides.
(I recently found posts saying it was best to add buttons to the TitleView rather than ContentPage.ToolbarItem as we couldn't changes the colour of the text.)
Instead we opted for fixed width buttons / spacers, so we could have a middle label for the title which would be centered. You can see the result below, unforunetly I'm going to have to increased the size of the button for longer text. We also support several languages so the text could be longer still.
Here's the xaml
<NavigationPage.TitleView>
<StackLayout Style="{StaticResource TitleViewStackLayout}">
<Label Style="{StaticResource TitleViewSpacer}"
HorizontalOptions="Start" />
<Label Text="{tran:Translate Contact_ConfirmEmail}"
Style="{StaticResource TitleViewLabel}" />
<Button Style="{StaticResource TitleViewButton}"
HorizontalOptions="End"
Text="{tran:Translate Common_Restart}"
Command="{Binding ToolbarItemRestartCommand}"/>
</StackLayout>
</NavigationPage.TitleView>
And here's our style...
<Style x:Key="TitleViewStackLayout" TargetType="StackLayout">
<Setter Property="BackgroundColor" Value="{DynamicResource DarkBlue}" />
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
<Setter Property="Orientation" Value="Horizontal" />
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Spacing" Value="0" />
</Style>
<Style x:Key="TitleViewLabel" TargetType="Label">
<Setter Property="TextColor" Value="{DynamicResource White}" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="HorizontalOptions" Value="CenterAndExpand" />
<Setter Property="FontSize" Value="{DynamicResource Title}" />
</Style>
<OnPlatform x:Key="TitleViewItemMargin" x:TypeArguments="Thickness" Android="10,0,10,0" iOS="0" />
<OnPlatform x:Key="TitleViewItemWidth" x:TypeArguments="x:Double" Android="60" iOS="50" />
<Style x:Key="TitleViewButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="{DynamicResource DarkBlue}" />
<Setter Property="TextColor" Value="{DynamicResource White}" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="Margin" Value="{DynamicResource TitleViewItemMargin}" />
<Setter Property="WidthRequest" Value="{DynamicResource TitleViewItemWidth}" />
<Setter Property="FontSize" Value="16" />
</Style>
<Style x:Key="TitleViewSpacer" TargetType="Label">
<Setter Property="BackgroundColor" Value="{DynamicResource DarkBlue}" />
<Setter Property="TextColor" Value="{DynamicResource White}" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="Margin" Value="{DynamicResource TitleViewItemMargin}" />
<Setter Property="WidthRequest" Value="{DynamicResource TitleViewItemWidth}" />
<Setter Property="FontSize" Value="16" />
</Style>
I did think about using a grid, I know could also add three columns all with Grid.Column="0".. but I'd then have the possibility of a long title which would overlap the buttons. We do have some long titles. I guess I would need to be able to set a max width and add LineBreakMode="TailTruncation"
Xamarin Forms - center title in a stacklayout
I did think about repeating the text but transparent to achieve equal widths, but this wouldn't cater for 2 different buttons.
As you said , it could be better to use Grid instead of StackLayout .
In your case , you could set the width of three columns as a fixed percentage value. In this way , since the Text of Label is a long value , it will never cover the right Button .
<NavigationPage.TitleView>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"/>
<ColumnDefinition Width="0.6*"/>
<ColumnDefinition Width="0.2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Column="0"
Text="Back"
MaxLines="1"
Style="{StaticResource TitleViewSpacer}"
HorizontalOptions="Start" />
<Label Grid.Column="1" Text="Email Confirm Email Confirm Email Confirm Email Confirm Email Confirm"
MaxLines="1"
LineBreakMode="TailTruncation" // you could set it or not , both are OK ,it's up to you
Style="{StaticResource TitleViewLabel}" />
<Button Grid.Column="2" Style="{StaticResource TitleViewButton}"
HorizontalOptions="EndAndExpand"
Text="Restart"
WidthRequest="80"
Command="{Binding ToolbarItemRestartCommand}"/>
</Grid>
</NavigationPage.TitleView>
I have a custom template for a flyout, and it works fine on about half of our systems, but it completely breaks on the other half.
Here's what the menu looks like when it works:
And here's what it looks like when it doesn't work... the semi-transparency is completely black, and the contents of the menu itself are completely off the screen:
You can ignore how the second screenshot is wider and how the stuff behind the menu looks different. That's just a different resolution and a different set-up, but this issue happens even when they're the same.
As noted in the picture, when the MenuFlyout appears (when I open the menu via clicking the AppBarButton), I need a semi-transparent area to appear in front of the rest of the page. This is accomplished by putting a big rectangle in the flyout's template, causing the shadow behind the flyout to be extended out over the rest of the page.
Here's the code of the button that triggers the flyout to show:
<AppBarButton
x:Name="MenuBtn"
Height="72"
Label="{StaticResource Menu}"
AllowFocusWhenDisabled="False"
Click="MenuBtn_Click"
CornerRadius="0"
Style="{StaticResource AppBarIconButtonStyle}"
TabIndex="9"
Width="72"
Margin="0,0,16,8"
Loaded="MenuBtn_Loaded"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.AlignBottomWithPanel="False">
<AppBarButton.Flyout>
<MenuFlyout x:Name="HbgMenuFlyout" MenuFlyoutPresenterStyle="{StaticResource MenuFlyoutPresenterStyle}" Opening="MenuFlyout_Opening" Closing="HbgMenuFlyout_Closing" Closed="MenuFlyout_Closed">
<MenuFlyoutItem x:Name="SelectRoomBtn" x:Uid="HbgMenu_Select_Room" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="SelectRoomBtn_Click" /> <!-- mobile only -->
<MenuFlyoutItem x:Name="PhysicianProfileBtn" x:Uid="HbgMenu_Physician_Preferences" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="Physician_Preferences_Click" />
<MenuFlyoutItem x:Name="SystemSettingsBtn" x:Uid="HbgMenu_Settings" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="SystemSettingsBtn_Click" />
<MenuFlyoutItem x:Name="HomeBtn" x:Uid="HbgMenu_Home" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="HomeBtn_Click" />
<MenuFlyoutItem x:Name="LogoutBtn" x:Uid="HbgMenu_Logout" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="LogoutBtn_Click" />
</MenuFlyout>
</AppBarButton.Flyout>
</AppBarButton>
Here's the code for the style attached to the MenuFlyout:
<Style x:Key="MenuFlyoutPresenterStyle" TargetType="MenuFlyoutPresenter">
<Setter Property="RequestedTheme" Value="Dark"/>
<Setter Property="Background" Value="Gray" />
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="BorderThickness" Value="0,0,0,0" />
<Setter Property="Padding" Value="0" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
<Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
<Setter Property="MaxWidth" Value="2000" />
<Setter Property="MinHeight" Value="{ThemeResource MenuFlyoutThemeMinHeight}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuFlyoutPresenter">
<controls:FlyoutGridControl />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And here's the code for that control:FlyoutGridControl:
<UserControl
x:Class="CardiologyApp.Controls.FlyoutGridControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CardiologyApp.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400" >
<RelativePanel x:Name="RootGrid" HorizontalAlignment="Stretch">
<Rectangle x:Name="Shield" Width="2000" RelativePanel.AlignRightWith="MenuFlyoutPresenterScrollViewer" PointerPressed="Rectangle_PointerPressed" />
<ScrollViewer x:Name="MenuFlyoutPresenterScrollViewer"
Width="516"
RelativePanel.AlignRightWithPanel="True"
HorizontalAlignment="Right"
Background="Gray"
AutomationProperties.AccessibilityView="Raw">
<ItemsPresenter />
</ScrollViewer>
<Border x:Name="MenuFlyoutPresenterBorder"
VerticalAlignment="Stretch"
RelativePanel.Below="MenuFlyoutPresenterScrollViewer"
RelativePanel.AlignRightWithPanel="True"
Height="1000"
Background="Gray"
Width="516"
/>
</RelativePanel>
The workaround for the developers is to comment out the in the control:FlyoutGridControl.
Any suggestions on how to make the behavior consistent across systems? We're all on Windows 10 Enterprise.
MenuFlyout is not suitable for pop-up layer fixed on the right sidebar. In higher system versions, MenuFlyout is not limited by the size of the application window, which will invalidate your layout.
According to your actual display picture, SplitView should be a control that better meets your needs.
This is a simplified layout structure:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<CommandBar VerticalAlignment="Top" HorizontalAlignment="Stretch">
<AppBarButton/>
</CommandBar>
<SplitView DisplayMode="CompactOverlay" OpenPaneLength="516"
PanePlacement="Right" x:Name="AppSplitView" Grid.Row="1">
<SplitView.Pane>
<Grid>
<!--Used to display list items-->
<ListView/>
</Grid>
</SplitView.Pane>
<SplitView.Content>
<Grid>
<!--Main content display area-->
</Grid>
</SplitView.Content>
</SplitView>
</Grid>
If you want to apply the above code, you need to use ListViewItem in ListView to replace your MenuItem.
If you need to show your options, just set:
AppSplitView.IsPaneOpen = True;
For more information about SplitView and its display effect, you can check this document:
Split view
I need to create something in WinRT/XAML similar to an HTML fielset. http://jsfiddle.net/Sf2Vy/
Basically, I have a border and there is some text on top of the border. Where the text covers the border, I need the border to not show under the text. The background behind the border isn't a solid color so I can't just set the background color of the text. The text length is variable also.
Is there an easy way to do this?
Yeah, so, the answer is no. There is no FieldSet.
Having said that, I think you could work out a similar effect simple enough. The code below shows you a solution that could easily be wrapped in a custom user control called fieldset.
<Grid Width="500" VerticalAlignment="Center">
<!-- top fieldset thing -->
<Grid VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="Border">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="BorderThickness" Value="0,5,0,0" />
<Setter Property="BorderBrush" Value="white" />
<Setter Property="Margin" Value="0,-2,0,0" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="10,-15,10,0" />
<Setter Property="FontSize" Value="30" />
</Style>
</Grid.Resources>
<Border Grid.Column="0" />
<TextBlock Grid.Column="1" Text="User Info" />
<Border Grid.Column="2" />
</Grid>
<!-- regular form fields -->
<Border BorderBrush="White" BorderThickness="5,0,5,5">
<StackPanel Margin="20">
<TextBox Header="Salutation" />
<TextBox Header="First Name" />
<TextBox Header="Middle Name" />
<TextBox Header="Last Name" />
<Button Margin="0,5,-3,0" HorizontalAlignment="Right">Save Data</Button>
</StackPanel>
</Border>
</Grid>
It looks something like this:
It's not 100% perfect - or, maybe... it is.
Best of luck!
Hmmm. . . I'm losing my mind. . . or am I?
I'm creating a WPF app for some basic data entry. I'm using textblocks to label the textboxes but ran into a snag. Why can't I vertically center the textblocks? I can't change the vertical alignment at all. Regardless of what I value I set on the property, the textblocks remain at the top. I want them centered! I can change the horizontal alignment no problem.
The contents of the XAML file, including the styles, are included below.
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SL3_ContactEntry.MainPage"
Width="500"
Background="#FF99DF52">
<UserControl.Resources>
<Style x:Key="MyTextBlockStyle"
TargetType="TextBlock">
<Setter Property="FontSize"
Value="12" />
<Setter Property="Margin"
Value="2" />
<Setter Property="Width"
Value="Auto" />
<Setter Property="Height"
Value="28" />
<Setter Property="HorizontalAlignment"
Value="Right" />
<Setter Property="VerticalAlignment"
Value="Center" />
</Style>
<Style x:Key="MyTextBoxStyle"
TargetType="TextBox">
<Setter Property="FontSize"
Value="12" />
<Setter Property="Margin"
Value="2" />
<Setter Property="Width"
Value="Auto" />
<Setter Property="Height"
Value="28" />
</Style>
<Style x:Key="MyButtonStyle"
TargetType="Button">
<Setter Property="FontSize"
Value="12" />
<Setter Property="Margin"
Value="2" />
<Setter Property="Width"
Value="100" />
<Setter Property="Height"
Value="33" />
</Style>
</UserControl.Resources>
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="0.81*" />
<RowDefinition Height="0.19*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical"
Grid.Column="0"
Margin="5">
<TextBlock Name="FName"
Text="First Name"
Style="{StaticResource MyTextBlockStyle}" />
<TextBlock Name="LName"
Text="Last Name"
Style="{StaticResource MyTextBlockStyle}" />
<TextBlock Name="StreetAddress"
Text="Street Address"
Style="{StaticResource MyTextBlockStyle}" />
<TextBlock Name="City"
Text="City"
Style="{StaticResource MyTextBlockStyle}" />
<TextBlock Name="State"
Text="State"
Style="{StaticResource MyTextBlockStyle}" />
<TextBlock Name="ZipCode"
Text="Zip Code"
Style="{StaticResource MyTextBlockStyle}" />
</StackPanel>
<StackPanel Orientation="Vertical"
Grid.Column="1"
Margin="5">
<TextBox Name="txtFName"
Style="{StaticResource MyTextBoxStyle}" />
<TextBox Name="txtLName"
Style="{StaticResource MyTextBoxStyle}" />
<TextBox Name="txtStreetAddress"
Style="{StaticResource MyTextBoxStyle}" />
<TextBox Name="txtCity"
Style="{StaticResource MyTextBoxStyle}" />
<TextBox Name="txtState"
Style="{StaticResource MyTextBoxStyle}" />
<TextBox Name="txtZipCode"
Style="{StaticResource MyTextBoxStyle}" />
<Button Content="OK"
Style="{StaticResource MyButtonStyle}" />
</StackPanel>
</Grid>
</UserControl>
I am not 100% sure why it is not centering, probably has to do with the height set on the elements, but what you can do is apply a padding to the TextBlocks to get them centered with the TextBoxes.