How do I change the FontSize and style of the data header in my xaml Datagrid - xaml

I have a datagrid which auto generates the columns.
<DataGrid Name="QueryGrid" AutoGenerateColumns="True" Height="1000" Width="1135" ItemsSource="{Binding QueryTable}" Visibility="{Binding Path=QueryGridVisiblity, Converter={StaticResource BoolToVis}}" />
I have to make the column names bold. How do i do this? Any suggestions?
Regards,
Sagar

Here is the answer i have found:
<DataGrid Name="QueryGrid" AutoGenerateColumns="True" Height="900" Width="1135" ItemsSource="{Binding QueryTable}" Visibility="{Binding Path=QueryGridVisiblity, Converter={StaticResource BoolToVis}}">
<DataGrid.ColumnHeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</DataGrid.ColumnHeaderStyle>
</DataGrid>

<DataGridTextColumn.HeaderStyle>
<Style
TargetType="DataGridColumnHeader">
<Setter
Property="Background"
Value="SteelBlue"
/>
<Setter
Property="HorizontalContentAlignment"
Value="Center"
/>
<Setter Property="FontSize" Value="17"/>
<Setter Property="FontWeight" Value="Bold"/>
</Style>
</DataGridTextColumn.HeaderStyle>

Related

2 different colored borders around TextBox

I want to do create static style where TextBox element will have 2 different colored borders around it. Can I achieve this?
I already have rounded textbox with 1 border, but I'm clueless how to add another around it.
<Style TargetType="{x:Type TextBox}" x:Key="RoundTextBox">
<Style.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="3"/>
</Style>
</Style.Resources>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#FF32C17C"/>
<GradientStop Color="#FF01312F" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="White"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="BorderBrush" Value="#FF69FF55"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FontWeight" Value="Medium"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Margin" Value="20,10,0,-5"/>
</Style>
This is my code for textbox style.
Thank you for all answers :)
You can change control template of the textbox and define another border inside the border.
<Window.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border
BorderBrush="Red"
BorderThickness="1"
CornerRadius="2">
<Border
Name="Border"
Background="White"
BorderBrush="Gray"
BorderThickness="1"
CornerRadius="2">
<ScrollViewer x:Name="PART_ContentHost" Margin="0" />
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TextBox
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="Test" />
</Grid>
Here is the result!
For more information about textbox styles and templates you can click here.

XAML DataGrid triggering style from other elements

(Note: The Snipping Tool has hidden the mouse cursor hovering over Amelia Earhart in this screen grab.)
When the mouse is RowHeader.IsMouseOver=True then the style is triggered and in this example the font is set to Bold and Italic and the colours change.
Problem: I want to call the same trigger when I Click or Mouseover on any DataGridCell in the row. So if I click on the cell "Hello World" then the RowHeader "Amelia Earhart" is formatted.
<DataGrid.RowHeaderStyle>
<Style TargetType="DataGridRowHeader">
<Setter Property="Width" Value="25"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<!-- I want to trigger this IsMouseOver from DataGridCell.IsMouseOver -->
<Label Content="{Binding [0]}" FontSize="10" Margin="0" >
<Label.Style>
<Style x:Name="sOne" TargetType="Label">
<Setter Property="Foreground" Value="WhiteSmoke"/>
<Setter Property="Background" Value="CadetBlue"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontStyle" Value="Italic" />
<Setter Property="Foreground" Value="Cyan"/>
<Setter Property="Background" Value="Navy"/>
</Trigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.RowHeaderStyle>

How to change Dropdown to Dropup in XAML

I recently downloaded Wox, an alternative search for Windows. Its search automatically appears as a dropdown menu. There is no way in the settings to change this to "dropup" rather than dropdown. I couldn't find this question asked anywhere, but the maker said in response to a question about a different change to appearance to edit the base theme document. I looked through the document, and couldn't find anywhere that seemed like an obvious place to toggle if the dropbox falls up or down, but I also only have very basic coding knowledge. I tried to search for how to do this online, but couldn't seem to find anything. The markup document is below. Is there anything I can change in this to cause it to drop up instead?
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:system="clr-namespace:System;assembly=mscorlib">
<Style x:Key="BaseQueryBoxStyle" TargetType="{x:Type TextBox}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="FontSize" Value="28" />
<Setter Property="FontFamily" Value="Segoe UI, Microsoft YaHei" />
<Setter Property="FontWeight" Value="Medium" />
<Setter Property="Height" Value="30" />
<Setter Property="Background" Value="#616161" />
<Setter Property="Foreground" Value="#E3E0E3" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Stylus.IsFlicksEnabled" Value="False" />
</Style>
<Style x:Key="BaseWindowBorderStyle" TargetType="{x:Type Border}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="CornerRadius" Value="0" />
<Setter Property="Background" Value="#424242"></Setter>
<Setter Property="Padding" Value="4 4 4 4" />
</Style>
<Style x:Key="BaseWindowStyle" TargetType="{x:Type Window}">
<Setter Property="Width" Value="350" />
<Setter Property="MaxWidth" Value="800" />
</Style>
<Style x:Key="BasePendingLineStyle" TargetType="{x:Type Line}">
<Setter Property="Stroke" Value="Blue" />
</Style>
<!-- Item Style -->
<Style x:Key="BaseItemTitleStyle" TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="#FFFFF8" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Medium" />
<Setter Property="FontFamily" Value="Segoe UI, Microsoft YaHei" />
</Style>
<Style x:Key="BaseItemSubTitleStyle" TargetType="{x:Type TextBlock}" >
<Setter Property="Foreground" Value="#D9D9D4" />
<Setter Property="FontFamily" Value="Segoe UI, Microsoft YaHei" />
</Style>
<Style x:Key="BaseItemNumberStyle" TargetType="{x:Type TextBlock}">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Margin" Value="3 0 0 0" />
<Setter Property="FontSize" Value="22" />
</Style>
<Style x:Key="BaseItemTitleSelectedStyle" TargetType="{x:Type TextBlock}" >
<Setter Property="Foreground" Value="#FFFFF8" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Medium" />
</Style>
<Style x:Key="BaseItemSubTitleSelectedStyle" TargetType="{x:Type TextBlock}" >
<Setter Property="Foreground" Value="#D9D9D4" />
</Style>
<Style x:Key="BaseListboxStyle" TargetType="{x:Type ListBox}">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer Focusable="false" Template="{DynamicResource ScrollViewerControlTemplate}">
<VirtualizingStackPanel IsItemsHost="True" />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ScrollViewer Style -->
<ControlTemplate x:Key="ScrollViewerControlTemplate" TargetType="{x:Type ScrollViewer}">
<Grid x:Name="Grid" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!--content in the left of ScrollViewer, just default-->
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
CanContentScroll="{TemplateBinding CanContentScroll}"
CanHorizontallyScroll="False"
CanVerticallyScroll="False"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Grid.Column="0"
Margin="{TemplateBinding Padding}"
Grid.Row="0" />
<!--Scrollbar in thr rigth of ScrollViewer-->
<ScrollBar x:Name="PART_VerticalScrollBar"
AutomationProperties.AutomationId="VerticalScrollBar"
Cursor="Arrow"
Grid.Column="1"
Margin="3 0 0 0"
Maximum="{TemplateBinding ScrollableHeight}"
Minimum="0"
Grid.Row="0"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
ViewportSize="{TemplateBinding ViewportHeight}"
Style="{DynamicResource ScrollBarStyle}" />
</Grid>
</ControlTemplate>
<!-- button style in the middle of the scrollbar -->
<Style x:Key="BaseThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border CornerRadius="2" DockPanel.Dock="Right" Background="#616161" BorderBrush="Transparent" BorderThickness="0" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="BaseScrollBarStyle" TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false" />
<Setter Property="Stylus.IsFlicksEnabled" Value="false" />
<!-- must set min width -->
<Setter Property="MinWidth" Value="0"/>
<Setter Property="Width" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<DockPanel>
<Track x:Name="PART_Track" IsDirectionReversed="true" DockPanel.Dock="Right">
<Track.Thumb>
<Thumb Style="{DynamicResource ThumbStyle}"/>
</Track.Thumb>
</Track>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Here is an MSDN example for changing ComboBox's ControlTemplate: https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/combobox-styles-and-templates
The interesting part is Popup:
<Popup x:Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
Changing Placement to Top should help.

Set TextBlock's Foreground in the Style

Is it possible to set Foreground property from the Style? Looking like it has no effect.
<Style x:Key="MyPageNameStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}" />
<Setter Property="Margin" Value="0,12,0,0"/>
<Setter Property="Foreground" Value="Green"/>
</Style>
It's simple be sure you bind it to a static resource
<Grid.Resources>
<Style x:Key="MyPageNameStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}" />
<Setter Property="Margin" Value="0,12,0,0"/>
<Setter Property="Foreground" Value="Green"/>
</Style>
</Grid.Resources>
<TextBlock Style="{StaticResource MyPageNameStyle}" Text="WP8 Demodccxzcxzczsczczxcxzczczczcz" Margin="9,-7,0,0" />
Youll be able to see the effect in the xaml designer only

how to set the color of toggle button from style already defined in app xaml?

I had created a button and i want to change its color using style from app xaml.
But,i don't get the exact code and i am new to xaml.
Can any one help me with some example.
I am also confused to use which property to change color means background or foreground?
<Window
x:Class="ToolBar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ToolBar"
Width="300"
Height="300">
<DockPanel>
<ToolBarTray
DockPanel.Dock="Top"
IsLocked="True"
Orientation="Horizontal">
<ToolBar
x:Name="ToolBar1">
<ToggleButton>
<ToggleButton.Style>
<Style
TargetType="{x:Type ToggleButton}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Label>Play</Label>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Label>Pause</Label>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Panel.Background" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
</ToolBar>
</ToolBarTray>
</DockPanel>
</Window>
Within a toolbar, the two statements:
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Panel.Background" Value="Transparent" />
causes the toggle button to appear in the normal state when the toggle button is checked, however nothing changes when you hover over the checked toggle button.
If I wrap the toggle button in another layout, say wrap layout:
<Window
x:Class="ToolBar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ToolBar"
Width="300"
Height="300">
<WrapPanel>
<ToggleButton>
<ToggleButton.Style>
<Style
TargetType="{x:Type ToggleButton}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Label>Play</Label>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Label>Pause</Label>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Panel.Background" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
</WrapPanel>
</Window>
the two statements:
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Panel.Background" Value="Transparent" />
You can find tutorial in the folowing url
http://social.msdn.microsoft.com/Forums/pl-PL/wpf/thread/7e565a41-0aad-40a3-a3c4-666c5caf38fe
Thanks
Deepak