Xamarin.Forms - Label not centered - xamarin

I've got a StackView which contains 2 Labels. One is normal text, and the other one is a FontAwesome Icon.
Anyhow both Labels are not centered vertically inside the StackView. Here is the Code for them:
The Styles:
<Style x:Key="FAIconedLabel" TargetType="Label">
<Setter Property="TextColor" Value="White"/>
<Setter Property="FontSize" Value="40" />
<Setter Property="Margin" Value="0" />
</Style>
<Style x:Key="EmailLabel" TargetType="Label">
<Setter Property="TextColor" Value="White"/>
<Setter Property="FontSize" Value="20" />
</Style>
And the Views itself
<!-- Top Right -->
<Grid BackgroundColor="{StaticResource LamaControlGray}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width,Factor=1,Constant=-400}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width,Factor=0,Constant=400}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Height,Factor=0,Constant=40}" >
<StackLayout Orientation="Horizontal" HorizontalOptions="End" VerticalOptions="FillAndExpand" BackgroundColor="Red">
<Label x:Name="LblUserEmail" Margin="0,0,10,0" Text="{Binding UserEmail}" VerticalOptions="FillAndExpand" Style="{StaticResource EmailLabel}"/>
<fal:FontAwesomeLabel Text="{Binding SettingsIcon}" BackgroundColor="Green" VerticalOptions="CenterAndExpand" Style="{StaticResource FAIconedLabel}" />
</StackLayout>
</Grid>
Do I miss something here?
Edit 1
I added a BackgroundColor to see, if the Label actually fills the StackView
Edit 2
After cleaning and rebuilding the solution, the email Label is centered now. But the Iconed one still remains at the bottom

Yes you are missing something.
You're not setting it to be centered vertically.
Either
<Label x:Name="LblUserEmail" Margin="0,0,10,0" Text="{Binding UserEmail}" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" Style="{StaticResource EmailLabel}"/>
or
<Label x:Name="LblUserEmail" Margin="0,0,10,0" Text="{Binding UserEmail}" VerticalOptions="CenterAndExpand" Style="{StaticResource EmailLabel}"/>

Related

I want to change the shape of the radio button, can I change the border size?

<ContentPage.Resources>
<ControlTemplate x:Key="FrameRadioTemplate">
<Frame
Padding="10"
BackgroundColor="{DynamicResource ColorBorder000}"
BorderColor="Red"
HeightRequest="50"
WidthRequest="130">
<ContentPresenter>
<ContentPresenter.Resources>
<Style TargetType="Label">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
<Style.Triggers>
<DataTrigger
Binding="{Binding Path=IsChecked, Source={x:RelativeSource AncestorType={x:Type RadioButton}}}"
TargetType="Label"
Value="True">
<Setter Property="TextColor" Value="{DynamicResource ColorText111}" />
<Setter Property="FontAttributes" Value="Bold" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{DynamicResource ColorBack004}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{DynamicResource ColorBack000}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Frame>
</ControlTemplate>
</ContentPage.Resources>
<StackLayout
x:Name="xDispContents"
Grid.Row="9"
Grid.Column="1"
HorizontalOptions="StartAndExpand"
Orientation="Horizontal"
Spacing="0">
<Ctrl:CtrlRadioButton
x:Name="xBtnDisp_ABS"
ControlTemplate="{StaticResource FrameRadioTemplate}"
HorizontalOptions="Center"
VerticalOptions="Center">
<Ctrl:CtrlRadioButton.Content>
<!--<Label TextColor="{DynamicResource ColorText000}" />-->
<Ctrl:CtrlButton Text="ABS" />
</Ctrl:CtrlRadioButton.Content>
</Ctrl:CtrlRadioButton>
<Ctrl:CtrlRadioButton
x:Name="xBtnDisp_Trans"
ControlTemplate="{StaticResource FrameRadioTemplate}"
HorizontalOptions="Center"
VerticalOptions="Center">
<Ctrl:CtrlRadioButton.Content>
<Label Text="%T" TextColor="{DynamicResource ColorText000}" />
</Ctrl:CtrlRadioButton.Content>
</Ctrl:CtrlRadioButton>
</StackLayout>
I want to change the shape of the radio button, can I change the border size?
I'm trying to change the shape of a radio button's appearance using a control template. But I want to change the border thickness of the frame, but there is no way.
The default thickness is too thick. I've looked for many other examples, but there's no information about the thickness, so I'm asking.
Maybe you can use this , Frame in a Frame .
Change the Padding for the "BorderWith" Color.
<Frame HeightRequest="50" WidthRequest="100" BackgroundColor="Red" HorizontalOptions="Center" VerticalOptions="Start" Padding="0.7" IsClippedToBounds="True">
<Frame HeightRequest="50" WidthRequest="100" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Start" Margin="0" Padding="0" IsClippedToBounds="True">
<Label Text="Padding 0.7" HorizontalOptions="Center" />
</Frame>
</Frame>
<Frame HeightRequest="50" WidthRequest="100" BackgroundColor="Red" HorizontalOptions="Center" VerticalOptions="Start" Padding="1" IsClippedToBounds="True">
<Frame HeightRequest="50" WidthRequest="100" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Start" Margin="0" Padding="0" IsClippedToBounds="True">
<Label Text="Padding 1" HorizontalOptions="Center" />
</Frame>
</Frame>
<Frame HeightRequest="50" WidthRequest="100" BackgroundColor="Red" HorizontalOptions="Center" VerticalOptions="Start" Padding="5" IsClippedToBounds="True">
<Frame HeightRequest="50" WidthRequest="100" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Start" Margin="0" Padding="0" IsClippedToBounds="True">
<Label Text="Padding 5" HorizontalOptions="Center" />
</Frame>
</Frame>
The result a border in Red in different size.

Xamarin Community Toolkit LongpressCommand stops item selection in CollectionView iOS

The code works as expected in Android but in iOS works inconsistently. The selected label's border changes colour when tapped, sometimes. After 3 or four taps of different labels they cease to be selected at all. Long pressing a label works as expected, opening a different view. On returning to the view containing the CollectionView code attached, label selection has been re-enabled. The process then repeats itself.
I've tried changing Nuget versions of both Xamarin.Forms and Xamarin.Community.Toolkit(even the latest pre-release), xaml and code-behind to no avail.
I'm at a loss. Any help would be appreciated.
<CollectionView x:Name="categoryCollectionView"
ItemsSource="{Binding Categories,Mode=TwoWay}"
SelectionMode="Single"
SelectedItem="{Binding Category}"
SelectionChanged="OnMenuItemSelected"
Grid.Column="0"
HorizontalOptions="FillAndExpand"
Grid.ColumnSpan="8"
Grid.Row="3"
VerticalScrollBarVisibility="Always" >
<CollectionView.ItemsLayout>
<GridItemsLayout x:Name="CategoriesGridLayout"
Orientation="Vertical"
Span="3"
VerticalItemSpacing="2"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter TargetName="lblCategory" Property="Label.TextColor" Value="Red" />
<Setter Property="BackgroundColor" Value="Green" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackLayout Orientation="Vertical"
VerticalOptions="Center"
xct:TouchEffect.LongPressCommand="{Binding LongPressCategoryCommand, Source={RelativeSource AncestorType={x:Type vm:CategoryVM}}}"
xct:TouchEffect.LongPressCommandParameter="{Binding CategoryString}" >
<StackLayout.Margin>
<OnPlatform x:TypeArguments="Thickness" iOS="2,2,4,4" Android="2" />
</StackLayout.Margin>
<Label x:Name="lblCategory"
Text="{Binding CategoryString}"
FontSize="Small"
BackgroundColor="#f5e2e1"
VerticalOptions="Center"
HorizontalOptions="CenterAndExpand"
WidthRequest="350"
Padding="5"
TextColor="#232F34"
LineBreakMode="TailTruncation"
Style="{DynamicResource CategoryLabelStyle}" >
<Label.Triggers>
<DataTrigger TargetType="Label"
Binding="{Binding Source={x:Reference fontSizeSwitch}, Path=IsToggled}"
Value="true">
<Setter Property="FontSize"
Value="Medium" />
<Setter Property="Padding"
Value="2" />
</DataTrigger>
</Label.Triggers>
</Label>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>

No XAML designer preview with custom ChromeWindow

I've been trying to build a custom chrome window vs a window with no border style.
In Visual Studio, the XAML designer is showing the custom title bar in the content area, and the actual content area controls aren't visible. When I compile and run it, everything looks correct.
One other side problem was I can't seem to get the Command binding on the titlebar buttons correct. I tried binding them to the appropriate SystemCommands but I'm not sure what I'm doing wrong there either. So instead I just added click event handlers and do the code there. Was just trying for a XAML only solution for that. The Click event handlers work correctly.
Below is my XAML. At the end of the XAML is a basic Grid with a TextBlock that says "I should be visible!" but it isn't in the designer.
Also attached (if I have the permissions to do so) is a screenshot of what the designer looks like in my Visual Studio. As you can see the controls I placed in the custom title bar are clearly visible. You'll also see in the screenshot that the default windows title bar is also visible.
Can anyone point me in the right direction as to why my designer isn't WYSIWYG?
<Window x:Class="Window1"
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:local="clr-namespace:ChromeWindowTest"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Name="Window1"
Title="Window1"
Width="800"
Height="450"
Background="#252525"
Foreground="White"
mc:Ignorable="d">
<WindowChrome.WindowChrome>
<WindowChrome CornerRadius="0"
GlassFrameThickness="0,0,0,1"
NonClientFrameEdges="None"
ResizeBorderThickness="5"
UseAeroCaptionButtons="True" />
</WindowChrome.WindowChrome>
<Window.Resources>
<local:WindowStateToMarginConverter x:Key="WindowStateToMarginConverter" />
<local:WindowStateToVisibilityConverter x:Key="WindowStateToVisibilityConverter" />
<Style TargetType="TextBlock">
<Setter Property="Foreground"
Value="White" />
<Setter Property="FontFamily"
Value="Lucida Sans Unicode" />
<Setter Property="FontSize"
Value="12 pt" />
<Setter Property="Margin"
Value="3,0" />
</Style>
<Style x:Key="CaptionButtonStyle"
TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="LayoutRoot"
Width="44"
Height="30"
Background="Transparent"
WindowChrome.IsHitTestVisibleInChrome="True">
<TextBlock x:Name="txt"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="Segoe MDL2 Assets"
FontSize="10"
Foreground="White"
RenderOptions.ClearTypeHint="Auto"
Text="{TemplateBinding Content}"
TextOptions.TextFormattingMode="Display"
TextOptions.TextRenderingMode="Aliased" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="LayoutRoot"
Property="Background"
Value="#F79721" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MinimizeButtonStyle"
BasedOn="{StaticResource CaptionButtonStyle}"
TargetType="Button">
<Setter Property="Content"
Value="" />
</Style>
<Style x:Key="MaximizeButtonStyle"
BasedOn="{StaticResource CaptionButtonStyle}"
TargetType="Button">
<Setter Property="Content"
Value="" />
<Setter Property="Visibility"
Value="{Binding WindowState,
Converter={StaticResource WindowStateToVisibilityConverter},
ConverterParameter=0}" />
</Style>
<Style x:Key="RestoreButtonStyle"
BasedOn="{StaticResource CaptionButtonStyle}"
TargetType="Button">
<Setter Property="Content"
Value="" />
<Setter Property="Visibility"
Value="{Binding WindowState,
Converter={StaticResource WindowStateToVisibilityConverter},
ConverterParameter=2}" />
</Style>
<Style x:Key="CloseButtonStyle"
TargetType="Button">
<Setter Property="Content"
Value="" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="LayoutRoot"
Width="44"
Height="30"
Background="Transparent"
WindowChrome.IsHitTestVisibleInChrome="True">
<TextBlock x:Name="txt"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="Segoe MDL2 Assets"
FontSize="10"
Foreground="White"
RenderOptions.ClearTypeHint="Auto"
Text="{TemplateBinding Content}"
TextOptions.TextFormattingMode="Display"
TextOptions.TextRenderingMode="Aliased" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="LayoutRoot"
Property="Background"
Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Window.Template>
<ControlTemplate TargetType="{x:Type Window}">
<Grid Background="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Background}">
<StackPanel Height="32"
Margin="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=WindowState,
Converter={StaticResource WindowStateToMarginConverter}}"
VerticalAlignment="Top"
Orientation="Horizontal">
<Button HorizontalAlignment="Left"
VerticalAlignment="Top"
Click="Icon_Click"
WindowChrome.IsHitTestVisibleInChrome="True">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<ContentPresenter />
</Grid>
</ControlTemplate>
</Button.Template>
<Image Width="32"
Height="32"
Source="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Icon}"
WindowChrome.IsHitTestVisibleInChrome="True" />
</Button>
<StackPanel Orientation="Vertical">
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="10 pt"
LineHeight="16"
LineStackingStrategy="BlockLineHeight"
Text="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Title}" />
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="10 pt"
LineHeight="16"
LineStackingStrategy="BlockLineHeight"
Text="{Binding Path=SubTitle}" />
</StackPanel>
</StackPanel>
<Button x:Name="btn"
Margin="3"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Click="btn_Click"
Content="Placeholder"
WindowChrome.IsHitTestVisibleInChrome="True" />
<StackPanel HorizontalAlignment="Right"
VerticalAlignment="Top"
Orientation="Horizontal">
<Button x:Name="MinimizeButton"
Click="MinimizeButton_Click"
Style="{DynamicResource MinimizeButtonStyle}" />
<Button x:Name="MaximizeButton"
Click="MaximizeButton_Click"
Style="{DynamicResource MaximizeButtonStyle}" />
<Button x:Name="RestoreButton"
Click="MaximizeButton_Click"
Style="{DynamicResource RestoreButtonStyle}" />
<Button x:Name="CloseButton"
Click="CloseButton_Click"
Style="{DynamicResource CloseButtonStyle}" />
</StackPanel>
<ContentPresenter Content="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType=Window},
Path=Content}" />
</Grid>
</ControlTemplate>
</Window.Template>
<Grid Margin="0,35,0,0">
<TextBlock Text="I should be visible!" />
</Grid>
I figured it out by accident.
In case anyone else happens across this post with a similar problem.
The following bit of code was wrong:
<ContentPresenter Content="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType=Window},
Path=Content}" />
The correct code is either just an empty ContentPresenter or the MSDN example for ChromeWindow of:
<ContentPresenter Content="{TemplateBinding Content}" />
No binding seemed to work fine as well.
Also, my original code above, I should probably have the content presenter as the first item in the Grid so that content doesn't obscure the title bar. I had there originally, but I moved it to the last entry to see if the reason I was seeing only the title bar was because of z-order.

Image background not showed correctly for ListView

I have a xaml page to show a label and a listview with grouping option. There is a background image to be shown for the whole page as I expect. However, the page works well with Android simulator (the image background is displayed on the whole page) but not with iOS simulator. on the iOS simulator, the image background is showed under the top label element with text of "History Facts", but it is not seen under the ListView area I marked/painted inside a red frame. The white background is filled under the ListView instead. Please see the attached screen shot. Please help. Thanks.
My xaml file markups:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Quiz;assembly=Quiz"
xmlns:converter="clr-namespace:Quiz.Converters;assembly=Quiz"
x:Class="Quiz.QuizResultPage">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="10, 20, 10, 0" Android="10, 0" WinPhone="10, 0" />
</ContentPage.Padding>
<ContentPage.Resources>
<ResourceDictionary>
<converter:BoolToStringConverter x:Key="boolToString" TrueText="Yes" FalseText="No" />
<converter:BoolToColorConverter x:Key="boolToColor" TrueColor="Green" FalseColor="Red"/>
<Style TargetType="View" x:Key="labelBase">
<Setter Property="HorizontalOptions" Value="Center"></Setter>
<Setter Property="VerticalOptions" Value="Center"></Setter>
</Style>
<Style TargetType="Label" x:Key="labelTopTitleStyle" BasedOn="{StaticResource labelBase}">
<Setter Property="FontSize" Value="Large"></Setter>
</Style>
<Style TargetType="Label" x:Key="questionStyle">
<Setter Property="FontFamily" Value="Courgette-Regular"></Setter>
<Setter Property="TextColor" Value="White"></Setter>
<Setter Property="FontAttributes" Value="Bold"></Setter>
<Setter Property="FontSize" Value="Medium"></Setter>
</Style>
<Style TargetType="Label" x:Key="labelTimerStyle" BasedOn="{x:StaticResource labelBase}">
<Setter Property="TextColor" Value="Yellow"></Setter>
<Setter Property="FontAttributes" Value="Bold"></Setter>
<Setter Property="FontSize" Value="Medium"></Setter>
<Setter Property="BackgroundColor" Value="Olive"></Setter>
</Style>
<Style x:Key="styleAnswer" TargetType="Label">
<Setter Property="FontFamily" Value="Courgette-Regular"></Setter>
<Setter Property="FontSize" Value="Large"></Setter>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<RelativeLayout Padding="0">
<!-- Background -->
<Image x:Name="imgBG"
Aspect="AspectFill"
Opacity="0.2"
Source="{local:ImageResource Quiz.Images.bg8.jpg}"
RelativeLayout.WidthConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height}">
</Image>
<StackLayout RelativeLayout.WidthConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height}"
Orientation="Vertical">
<Label Text="History Facts" Style="{Binding Source={x:StaticResource labelTopTitleStyle}}" ></Label>
<ListView x:Name="listViewResultQuestions" BindingContext="{Binding}" ItemsSource="{Binding Questions}"
IsGroupingEnabled="True"
GroupDisplayBinding="{Binding Text}"
GroupShortNameBinding="{Binding ShortName}"
>
<ListView.RowHeight>
<OnPlatform x:TypeArguments="x:Int32" iOS="80" Android="80" WinPhone="90" />
</ListView.RowHeight>
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BindingContext="{Binding}" VerticalOptions="FillAndExpand" Padding="5"
BackgroundColor="{Binding Path=IsAnswerValid, Converter={x:StaticResource boolToColor}}" Orientation="Horizontal">
<Label Text="{Binding DisplayIndex, StringFormat='{0}. '}" Style="{StaticResource questionStyle}" LineBreakMode="NoWrap"/>
<Label Text="{Binding Text}" Style="{StaticResource questionStyle}"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BindingContext="{Binding}" Padding="20, 5, 5, 5" Orientation="Vertical">
<Label Text="{Binding Text}" Style="{StaticResource styleAnswer}"/>
<Label Text="{Binding IsValid, StringFormat='Answer is correct: {0}', Converter={x:StaticResource boolToString}}" Style="{StaticResource styleAnswer}"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</RelativeLayout>
</ContentPage>
On iOS the listview has a white background color as default , so all what you need to do is to Set the BackgroundColor to "Transparent" and this will solve your problem
Following BraveHeart, I need to set the BackgroundColor of the ListView to "Transparent" and the problem has been solved.

how we use window user phone controll in my app

i want to add a user control like stack panel in my Grid for example
- a grid which name content panel which is in MainPage.xaml
- List item
-stack panel which is in usercontrol.xaml
<UserControl x:Class="USER.WindowsPhoneControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="UserControl_Loaded">
<StackPanel HorizontalAlignment="Center">
<StackPanel.Resources>
<!--Create a Style for a TextBlock.-->
<Style TargetType="TextBlock" x:Key="TextBlockStyle">
<Setter Property="Foreground" Value="Navy"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
</Style>
<!--Create a Style for a TextBlock.-->
<Style TargetType="TextBox" x:Key="TextBoxStyle">
<Setter Property="Width" Value="200"/>
<Setter Property="Height" Value="30"/>
<Setter Property="Margin" Value="4"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Background" Value="Blue"/>
</Style>
</StackPanel.Resources>
<TextBlock FontSize="18" Text="Enter your name." Name="abc" />
<StackPanel Orientation="Horizontal" Name="sta">
<TextBlock Style="{StaticResource TextBlockStyle}">
First Name:
</TextBlock>
<TextBox Name="firstName" Style="{StaticResource TextBoxStyle}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Style="{StaticResource TextBlockStyle}">
Last Name:
</TextBlock>
<TextBox Name="lastName" Style="{StaticResource TextBoxStyle}"
Margin="6,4,4,4"/>
</StackPanel>
<Button Width="50" Content="Submit" Click="Button_Click"/>
</StackPanel>
</UserControl>
i want to add stack panel in grid .....
thanx in advance
I'm not 100% certain what you're actually asking in your question but it's perfectly possible to put a StackPanel in a Grid:
<Grid>
<StackPanel />
</Grid>

Resources