ControlTemplate Trigger - xaml

<Style TargetType="{x:Type TextBox}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="KeyboardNavigation.TabNavigation" Value="None" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="AllowDrop" Value="true" />
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border Name="Border" CornerRadius="6" Padding="2" BorderBrush="Black" BorderThickness="2,1">
<ScrollViewer Margin="0" x:Name="PART_ContentHost" />
</Border>
<ControlTemplate.Triggers>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The code above is currently what I have for my text box. What do I put in the ControlTemplate.Trigger in order for my border to change from its color black to Blue or increase the Border size when it is clicked on. I have tried a few things without any luck. This includes style.Triggers and events. Please post the code that goes between the ControlTemplate.Trigger.

This assumes you want to border to be changed when you have it focused, since clicking a textbox focuses it. There is no OnClick property available, this changes the border of a textbox once you have it focused.
<Trigger Property="IsKeyboardFocusWithin"
Value="True">
<Setter Property="BorderBrush"
TargetName="Border"
Value="Blue"/>
</Trigger>
Edit:
To simply remove focus, add the following MouseDown event handler to your Window or Page:
MouseDown="Window_MouseDown"
And in your code behind:
private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
Keyboard.ClearFocus();
}
This will correctly remove focus from your TextBox and thus unset the trigger to have a black bar again.

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