I got to make 4 buttons near each other, I've done it by grid, but I've asked to add borders at only one/two sides (like in the next screenshot)
With borders
So far I've done that:
Without
The code:
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style TargetType="Button" x:Key="NavagtionButtons">
<Setter Property="Height" Value="100"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Background" Value="Black" />
<Setter Property="Foreground" Value="White" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Style="{StaticResource NavagtionButtons}" Grid.Row="0" Grid.Column="0" >
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="Assets/donut-icon.png" Stretch="None" />
<TextBlock Text="Donut" Margin="10,15,0,0" />
</StackPanel>
</Button.Content>
</Button>
<Button Style="{StaticResource NavagtionButtons}" Grid.Row="0" Grid.Column="1" >
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="Assets\coffee-icon.png" Stretch="None"/>
<TextBlock Text="Coffe" Margin="10,15,0,0" />
</StackPanel>
</Button.Content>
</Button>
<Button Style="{StaticResource NavagtionButtons}" Grid.Row="0" Grid.Column="2" >
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="Assets\schedule-icon.png" Stretch="None" />
<TextBlock Text="Schedule" Margin="10,15,0,0"/>
</StackPanel>
</Button.Content>
</Button>
<Button Style="{StaticResource NavagtionButtons}" Grid.Row="0" Grid.Column="3">
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="Assets\complete-icon.png" Stretch="None" />
<TextBlock Text="Complete" Margin="10,15,0,0"/>
</StackPanel>
</Button.Content>
</Button>
</Grid>
So how can I add borders only on the sides he showed?
Related
When I try to display content from the ContentPresenter I cannot see anything. The test block does not display any text and it seems to be hidden.
<local:ResizableVideoHostWindow x:Class="TestClass"
x:ClassModifier="internal"
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:shell="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
mc:Ignorable="d"
Title="{Binding Title}">
<Window.Style>
<Style TargetType="{x:Type local:ResizableVideoHostWindow}">
<Setter Property="WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome
CaptionHeight="30"
CornerRadius="1"
GlassFrameThickness="0,0,0,-1"
NonClientFrameEdges="None"
ResizeBorderThickness="5"
UseAeroCaptionButtons="true"/>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ResizableVideoHostWindow}">
<Grid x:Name="AppTitleBar" Background="Transparent" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
<ColumnDefinition/>
<ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>
<Button
Background="Transparent"
Visibility="Visible"
BorderThickness="0"
Grid.Column="1"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Width="20"
Height="20"
Margin="8,2,0,0"
shell:WindowChrome.IsHitTestVisibleInChrome="True">
<TextBlock Text="" FontFamily="Segoe MDL2 Assets">
</TextBlock>
</Button>
<TextBlock
FontFamily="Segoe UI"
Grid.Column="1"
Height="20"
HorizontalAlignment="Left"
VerticalAlignment="Center"
TextAlignment="Center"
Margin="35,4,0,0"
Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}" />
<Button
Background="Transparent"
Visibility="Visible"
BorderThickness="0"
Grid.Column="1"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,0,160,0"
Width="30"
Height="30"
shell:WindowChrome.IsHitTestVisibleInChrome="True">
<TextBlock Text="" FontFamily="Segoe MDL2 Assets">
</TextBlock>
</Button>
<ContentPresenter Grid.Row="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="WindowState" Value="Maximized">
<Setter Property="BorderThickness" Value="7" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Style>
<Grid Visibility="Visible">
<TextBlock Text="Test Block" FontSize="20" >
</TextBlock>
<local:AppProxyContainer
DataContext="{Binding ContainerViewModel}" />
</Grid>
</local:ResizableVideoHostWindow>
I am mainly confused on how to display the content. I have seen other posts stating that this method of using ContentPresenter works, but it does not work for me.
You use the ContentPresenter correctly, but you do not set its column in the Grid, so it will be placed in the LeftPaddingColumn column, which has zero Width.
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
<ColumnDefinition/>
<ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>
Set its attached Grid.Column property to 1, so it will be displayed in the second column, which sizes to the remaining space.
<ContentPresenter Grid.Row="1" Grid.Column="1"/>
i have defined a controltemplate that is used to windows ,then windows have the same view as basically.
after that ,i should add different controls in different windows. and i have no idea how to add the elements' host in controltemplate to hold different parts of controls which likes the picture bellow.
and one more thing, how to access the controls and how to set the buttons' actions in controltemplate of different window? it should be use a windowBase class to do that ?
first .the screen picture
and the control template file
<ImageSource x:Key="BtnCloseNormal">../images/others/popup_btn_reduction_normal.png</ImageSource>
<ImageSource x:Key="BtnCloseMouseOver">../images/others/popup_btn_reduction_mouseover.png</ImageSource>
<ImageSource x:Key="BtnClosePressed">../images/others/popup_btn_reduction_selected.png</ImageSource>
<Style x:Key="StatedButtonStyle" TargetType="{x:Type c:StatedButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type c:StatedButton}" >
<Grid>
<Border>
<Image x:Name ="btnImg" Source="{Binding NormalBackground ,RelativeSource={RelativeSource TemplatedParent}}" Stretch="Fill"/>
</Border>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="btnImg" Property="Source" Value="{Binding MouseOverBackground ,RelativeSource={RelativeSource TemplatedParent}}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="btnImg" Property="Source" Value="{Binding PressedBackground ,RelativeSource={RelativeSource TemplatedParent}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="WindowBaseStyle" TargetType="{x:Type Window}">
<Setter Property="Background" Value="{x:Null}"></Setter>
<Setter Property="AllowsTransparency" Value="True"></Setter>
<Setter Property="WindowStyle" Value="None"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid Background="{x:Null}">
<Border CornerRadius="10" Background="White" Margin="20">
<Border.Effect>
<DropShadowEffect BlurRadius="10" Color="Black" Direction="270" ShadowDepth="5" RenderingBias="Quality" Opacity="0.6"></DropShadowEffect>
</Border.Effect>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="10"/>
<RowDefinition/>
<RowDefinition Height="40"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<Label x:Name="lblTitle" Grid.Column="0" Margin="20,6,0,0" FontSize="18" FontWeight="Bold"
Content="{TemplateBinding Title}">
</Label>
<c:StatedButton Grid.Column="2" Width="30" Height="30" Style="{StaticResource StatedButtonStyle}"
NormalBackground="{StaticResource BtnCloseNormal}"
MouseOverBackground="{DynamicResource BtnCloseMouseOver}"
PressedBackground="{StaticResource BtnClosePressed}"/>
<c:StatedButton Grid.Column="3" Width="30" Height="30" Style="{StaticResource StatedButtonStyle}"
NormalBackground="{StaticResource BtnCloseNormal}"
MouseOverBackground="{DynamicResource BtnCloseMouseOver}"
PressedBackground="{StaticResource BtnClosePressed}"/>
<c:StatedButton Grid.Column="4" Width="30" Height="30" Style="{StaticResource StatedButtonStyle}"
NormalBackground="{StaticResource BtnCloseNormal}"
MouseOverBackground="{DynamicResource BtnCloseMouseOver}"
PressedBackground="{StaticResource BtnClosePressed}"/>
</Grid>
<Separator Background="LightGray" Grid.Row="1" Height="2"></Separator>
<Grid Grid.Row="2">
<!--some controls will be insert here-->
</Grid>
<Grid Grid.Row="3" Background="Red" >
<!--some controls will be insert here-->
<ContentControl Content="{Binding }"></ContentControl>
</Grid>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and the window.xaml
<Window x:Class="WpfApp1.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
xmlns:uctrls="clr-namespace:WpfApp1.Uctrls"
mc:Ignorable="d"
Style="{StaticResource WindowBaseStyle}"
Title="Window1 -- title" Height="300" Width="500">
<Grid>
<Label x:Name="lblTitle" Content="title"></Label>
<Button x:Name="BtnTest" Content="Get TextBox1" Click="BtnTestClick"></Button>
<uctrls:UserControlBase>
<Grid>
<Button Content="what "></Button>
</Grid>
</uctrls:UserControlBase>
</Grid>
i have done it myself.
just use code bellow to host new controls
<AdornerDecorator>
<contentpresenter/>
</AdornerDecorator>
and create a windowBase as parent class of new windows.
I have a round-cornered border and I am trying to make its contents to be also round-cornered but my attempts are not working. Basically I am doing a kind of custom MessageBox but simpler, only with one image icon, a text and a button. No title bar. Image icon is changing depending on the type of message.
Stackpanel corners overlaps over border so border corners are not showing rounded.
ATTEMPT #1:
<Border x:Name="MyCustomMessageBox"
CornerRadius="5,5,5,5"
Grid.ZIndex="3"
Visibility="{Binding IsMessageBoxShown, Mode=TwoWay, Converter={StaticResource BoolToVis}}"
Width="auto" Height="auto"
HorizontalAlignment="Center"
VerticalAlignment="Center"
BorderBrush="DarkBlue" BorderThickness="1"
Background="White">
<Border.Effect>
<DropShadowEffect />
</Border.Effect>
<Grid Background="Blue">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Background="WhiteSmoke">
<Grid>
<Image VerticalAlignment="Center" HorizontalAlignment="Left"
Source="/Common.MyImages;component/Images/Info.png"
Height="48" Width="48" Margin="20,10">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="/Common.MyImages;component/Images/Info.png"/>
<Style.Triggers>
<DataTrigger Binding="{Binding MsgType}" Value="1">
<Setter Property="Source" Value="/Common.MyImages;component/Images/Error.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Grid>
<TextBlock Width="280" Margin="0,0,10,0" VerticalAlignment="Center" HorizontalAlignment="Left"
Background="Transparent" FontSize="12" TextWrapping="Wrap"><Run Text="This is a message"/>
</TextBlock>
</StackPanel>
<Button x:Name="btnCustomMessageBox" Grid.Row="1" Grid.Column="0"
Click="btnCustomMessageBox_Click"
HorizontalAlignment="Center" Margin="10" Width="80" Content="Ok" Visibility="Visible"/>
</Grid>
</Border>
ATTEMPT #2:
As explained here, I have tried also but without success.
<Grid>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=MyCustomMessageBox}" />
</Grid.OpacityMask>
<!-- Here goes all the above border code -->
</Grid>
The following should solve your issue.
<Border x:Name="MyCustomMessageBox"
CornerRadius="5"
Visibility="{Binding IsMessageBoxShown, Mode=TwoWay, Converter={StaticResource BoolToVis}}"
Width="auto" Height="auto"
HorizontalAlignment="Center"
VerticalAlignment="Center"
BorderBrush="DarkBlue"
BorderThickness="1"
Background="blue">
<Border.Effect>
<DropShadowEffect />
</Border.Effect>
<Grid> <!-- removed the Background here. Only letting borders provide background. -->
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--
Added a border to fill the top part of the grid with the
whitesmoke color using a borderradius on the top.
Also note that the Background from the stackpanel was removed.
-->
<Border
Grid.Row="0" Grid.Column="0"
Name="mask"
Background="WhiteSmoke"
CornerRadius="5,5,0,0"
/>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
<Grid>
<Image VerticalAlignment="Center" HorizontalAlignment="Left"
Source="/Common.MyImages;component/Images/Info.png"
Height="48" Width="48" Margin="20,10">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="/Common.MyImages;component/Images/Info.png"/>
<Style.Triggers>
<DataTrigger Binding="{Binding MsgType}" Value="1">
<Setter Property="Source" Value="/Common.MyImages;component/Images/Error.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Grid>
<TextBlock Width="280" Margin="0,0,10,0" VerticalAlignment="Center" HorizontalAlignment="Left"
Background="Transparent" FontSize="12" TextWrapping="Wrap"><Run Text="This is a message"/>
</TextBlock>
</StackPanel>
<Button x:Name="btnCustomMessageBox" Grid.Row="1" Grid.Column="0"
Click="btnCustomMessageBox_Click"
HorizontalAlignment="Center" Margin="10" Width="80" Content="Ok" Visibility="Visible"/>
</Grid>
</Border>
I have a ListView like this:
<ListView x:Name="Thumbnails" HorizontalContentAlignment ="Center" VerticalContentAlignment="Top" Padding="0" Background ="#81AFD3" Grid.Row="6" Grid.Column="6" Grid.ColumnSpan="10" Grid.RowSpan="27" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="IsSelected" Value="True"/>
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
</ListView>
Now, I would like to populate it with 5 elements. Each element is a a Grid that contains one image and two buttons. So I defined this Grid in UserControl.Resourceslike this:
</UserControl.Resources>
<Grid x:Key="ThumbnailElement">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Image Name="thumbImage" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="14" Grid.RowSpan="7" Source="/Assets/ImportAssets/Test.jpg"></Image>
<Button Name="slide_ON_OFF" Grid.Row="0" Grid.Column="10" Grid.ColumnSpan="4" Grid.RowSpan="4">
<Button.Template>
<ControlTemplate>
<Grid RenderTransformOrigin="0.5,0.5" x:Name="bg">
<Image Source="/MS_Show_Assets/ImportAssets/Visible_ON.png"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Name="fadein_ON_OFF" Grid.Row="3" Grid.Column="10" Grid.ColumnSpan="4" Grid.RowSpan="4">
<Button.Template>
<ControlTemplate>
<Grid RenderTransformOrigin="0.5,0.5" x:Name="bg">
<Image x:Name ="main_image" Source="/MS_Show_Assets/ImportAssets/Bulletpoint_ON.png"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</UserControl.Resources>
How would I do this, and only in XAML, without using code behind?
Use ContentControl to swap your views. Example:
<UserControl xmlns:Views="....View">
<UserControl.Resources>
<ControlTemplate x:Key="DefultTemplate">
<Views:DefultView/>
</ControlTemplate>
</UserControl.Resources>
<ListView x:Name="Thumbnails" HorizontalContentAlignment ="Center" VerticalContentAlignment="Top" Padding="0" Background ="#81AFD3" Grid.Row="6" Grid.Column="6" Grid.ColumnSpan="10" Grid.RowSpan="27" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListView.ItemContainerStyle>
<Style TargetType="ContentControl">
<Setter Property="Template" Value="{StaticResource DefultTemplate}" />
</Style>
</ListView.ItemContainerStyle>
<ListItem Background="Red" Margin="5 5 5 5"/>
<ListItem Background="Red" Margin="5 5 5 5"/>
<ListItem Background="Red" Margin="5 5 5 5"/>
<ListItem Background="Red" Margin="5 5 5 5"/>
<ListItem Background="Red" Margin="5 5 5 5"/>
<ListItem Background="Red" Margin="5 5 5 5"/>
</ListView>
</UserControl>
DefultTemplate:
<UserControl ....>
<....>
</UserControl>
If we don't now the number of items, we can use:
<ListView ItemsSource="{Binding SomeCollection}" x:Name="Thumbnails" HorizontalContentAlignment ="Center" VerticalContentAlignment="Top" Padding="0" Background ="#81AFD3" Grid.Row="6" Grid.Column="6" Grid.ColumnSpan="10" Grid.RowSpan="27" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListView.ItemContainerStyle>
<Style TargetType="ContentControl">
<Setter Property="Template" Value="{StaticResource DefultTemplate}" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
this below is a chat window. the font size is not setup where to put this? for the chat text we do have font size for the send button
MinHeight="550" MinWidth="834"
Closed="Window_Closed" >
<Window.Resources>
<Style x:Key="SpeechOptionsStyle" TargetType="RadioButton">
<Setter Property="Margin" Value="2,8,0,0" />
</Style>
<Style x:Key="ChatButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Height" Value="23" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Width" Value="150" />
<Setter Property="Margin" Value="0,5,0,0" />
</Style>
</Window.Resources>
<Grid>
<Grid.Background>
<LinearGradientBrush>
<GradientStop Color="LightSlateGray" Offset="0"/>
<GradientStop Color="Gainsboro" Offset="0.7"/>
<GradientStop Color="LightSlateGray" Offset="0.95"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="170" />
</Grid.ColumnDefinitions>
<ListBox Grid.Row="1" Grid.Column="0" x:Name="chatListBoxMsgs" Margin="10"
HorizontalContentAlignment="Stretch" >
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}" >
<EventSetter Event="MouseDoubleClick"
Handler="chatListBoxMsgs_MouseDoubleClick" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
<Grid Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Margin="10"
Width="150">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListBox Grid.Row="0" x:Name="chatListBoxNames" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="150" />
<StackPanel Grid.Row="1" Margin="0,10,0,0"> <CheckBox Visibility="Hidden" x:Name="chatCheckBoxWhisper" Height="17" HorizontalAlignment="Left" Foreground="Black" FontSize="12" >Whisper Mode</CheckBox>
</StackPanel>
</Grid>
<TextBlock Visibility="Visible" Grid.Row="2" Grid.Column="0" x:Name="chatLabelWritingMsg"
Height="45" VerticalAlignment="Top" Foreground="MediumBlue"
TextWrapping="Wrap" Margin="10,0,0,0">Status</TextBlock>
<StackPanel Grid.Row="2" Grid.Column="1" Grid.RowSpan="2"
Orientation="Vertical" Margin="10,0" >
<Button x:Name="chatButtonConnect" Click="chatButtonConnect_Click"
Style="{StaticResource ChatButtonStyle}" >Connect</Button>
<Button x:Name="chatButtonDisconnect" Click="chatButtonDisconnect_Click"
Style="{StaticResource ChatButtonStyle}" >Disconnect</Button>
</StackPanel>
<Grid Grid.Row="3" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" x:Name="chatTxtBoxType" Height="60"
VerticalAlignment="Top" Margin="10,0,5,5" TextWrapping="Wrap"
SpellCheck.IsEnabled="True" />
<Button Grid.Column="1" x:Name="chatButtonSend"
Click="chatButtonSend_Click" Height="60" VerticalAlignment="Top"
HorizontalAlignment="Right" Width="50" Margin="5,0,5,5"
FontSize="14">Send</Button>
</Grid>
</Grid>
</Window>
we have here the fontsize for the send button where do we put font ssize for the chat text it is defaulting to 8
From your code I think you want to set the font size of chatTxtBoxType. You can do it right in there (using an example size of 14):
<TextBox Grid.Column="0" x:Name="chatTxtBoxType" Height="60"
VerticalAlignment="Top" Margin="10,0,5,5" TextWrapping="Wrap"
SpellCheck.IsEnabled="True" FontSize="14"/>
Or using a style, like how you did for buttons (in that case, you might want to move some other properties to the style):
<Window.Resources>
<Style x:Key="ChatBoxStyle" TargetType="TextBox">
<Setter Property="FontSize" Value="14" />
</Style>
...
<TextBox Grid.Column="0" x:Name="chatTxtBoxType" Height="60"
VerticalAlignment="Top" Margin="10,0,5,5" TextWrapping="Wrap"
SpellCheck.IsEnabled="True" Style="{StaticResource ChatBoxStyle}"/>