I want to data trigger on an Icon but i can not find out how to do this :( I tried this code baut is does not work can any one help pleaaaase ?
<Style x:Key="ConnectionIcon" TargetType="{x:Type Rectangle}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=ConnectionStatus}" Value="True">
<Setter Property="Resources">
<Setter.Value>
<SolidColorBrush Color="Green" />
</Setter.Value>
</Setter>
<Setter Property="Fill">
<Setter.Value>
<VisualBrush Stretch="Fill" Visual="{StaticResource appbar_disconnect}" />
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Path=ConnectionStatus}" Value="False">
<Setter Property="Resources">
<Setter.Value>
<SolidColorBrush Color="Red" />
</Setter.Value>
</Setter>
<Setter Property="Fill">
<Setter.Value>
<VisualBrush Stretch="Fill" Visual="{StaticResource appbar_connect}" />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
Here is a little trick for this by using the OpacityMask and simple change the Fill property of the Rectangle.
<Style x:Key="ConnectionIcon"
TargetType="{x:Type Rectangle}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=ConnectionStatus}"
Value="True">
<Setter Property="Fill"
Value="Green" />
<Setter Property="OpacityMask">
<Setter.Value>
<VisualBrush Stretch="Fill"
Visual="{StaticResource appbar_disconnect}" />
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Path=ConnectionStatus}"
Value="False">
<Setter Property="Fill"
Value="Red" />
<Setter Property="OpacityMask">
<Setter.Value>
<VisualBrush Stretch="Fill"
Visual="{StaticResource appbar_connect}" />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
Hope this helps.
Related
I defined a button by xamp look like:
<Window.Resources>
<Style x:Key="mybutton" TargetType="Button">
<Setter Property="Width" Value="200"/>
<Setter Property="Height" Value="200"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Border BorderThickness="5" BorderBrush="#7A2D37" CornerRadius="5">
<Rectangle x:Name="myele">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0 0" EndPoint="1 1">
<GradientStop Color="White" Offset="0.1"></GradientStop>
<GradientStop Color="#28009B" Offset="1"></GradientStop>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Border>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Margin="100" Style="{StaticResource mybutton}" Click="Button_Click"></Button>
</Grid>
And Button_click event:
private void Button_Click(object sender, RoutedEventArgs e)
{
Button btn = (Button)sender;
btn.BorderBrush = Brushes.Yellow;
btn.BorderThickness = new Thickness(30);
}
But when I click the button, the border did not change.
Could you give me your advance. Thank you verry much.
In the ControlTemplate, use {TemplateBinding ...} for BorderBrush and BorderThickness. And provide those default values via Setter. Then you can change them by code.
<Style x:Key="mybutton" TargetType="Button">
<Setter Property="Width" Value="200"/>
<Setter Property="Height" Value="200"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="BorderBrush" Value="#7A2D37"/>
<Setter Property="BorderThickness" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="5">
<Rectangle x:Name="myele">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0 0" EndPoint="1 1">
<GradientStop Color="White" Offset="0.1"></GradientStop>
<GradientStop Color="#28009B" Offset="1"></GradientStop>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Border>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When I hover my mouse over any text box it shows by default light blue color as border color. How can change this color to any other color?
Similar behavior occurs when I try to select a date from a calendar or a month it provides blue color as border color by default. Is there any way to customize this default behavior to change the change?
The only way to change these colors is to restyle the controls by extracting and updating the control template (ex. using Blend for Visual Studio).
For example, Blend will give you a TextBox control template that looks like this:
<SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFABAdB3"/>
<SolidColorBrush x:Key="TextBox.MouseOver.Border" Color="#FF7EB4EA"/>
<SolidColorBrush x:Key="TextBox.Focus.Border" Color="#FF569DE5"/>
<Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
You can then update the TextBox.MouseOver.Border brush or customize anything else you wish.
I have a custom control, in that custom control I have loaded the TextBox, and I have customized the style for TextBox in Generic.XAML file but the style is not applied, Please refer the below code
CustomControl.cs
class CustomControl1 : Control
{
public CustomControl1()
{
this.DefaultStyleKey = typeof(CustomControl1);
}
}
Generic.XAML
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CustomControl">
<Style TargetType="TextBox">
<Setter Property="Foreground" Value="Red"/>
</Style>
<Style TargetType="local:CustomControl1">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CustomControl1">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBox Width="100" Height="100" Text="Hi"
VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
MainWindow.XAML
<Page
x:Class="CustomControl.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CustomControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<local:CustomControl1 VerticalAlignment="Center" HorizontalAlignment="Center" Width="200" Height="200"/>
</Grid>
I have set the foreground color for TextBox in Generic.XAML file but that is not set to the TextBox. Please refer the below image,
If I customized the style for a TextBox in Page.Resources in MainWindow.XAML its works fine. But I need to customized in Generic.XAML itself.
Any suggestion on this?
There are multiple solutions:
Just set the Foreground property on the TextBox.
Since you ask this question, I suppose you'll have multiple TextBoxes and don't want to repeat setting the property. If the color has to change some day, you'll have a lot of work.
Give your TextBox style a key and apply that style.
Easy fix, but not perfect if have multiple types of controls with Foreground property.
<Style x:Key="RedStyle" TargetType="TextBox">
<Setter Property="Foreground" Value="Red"/>
</Style>
<Style TargetType="local:CustomControl1" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CustomControl1">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBox Width="100" Height="100" Text="Hi" Style="{StaticResource RedStyle}"
VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Define the Foreground property on your template and use TemplateBinding
This is my favorite fix.
<Style TargetType="local:CustomControl1" >
<Setter Property="Foreground" Value="Red" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CustomControl1">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBox Width="100" Height="100" Text="Hi" Foreground="{TemplateBinding Foreground}"
VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I know how to set the theme of an entire page with the RequestedTheme property.
But I was wondering how do I explicitly set the theme for a MenuFlyout from c#.
Okay I was able to solve this by
Style s = new Windows.UI.Xaml.Style { TargetType = typeof(MenuFlyoutPresenter) };
s.Setters.Add(new Setter(RequestedThemeProperty, ElementTheme.Dark));
myMenuFlyout.MenuFlyoutPresenterStyle = s;
MenuFlyout doesn't inherit FrameworkElement class. If you want change visualization of your flyout you can use MenuFlyoutPresenterStyle property.
<Style x:Key="MenuFlyoutPresenterStyle" TargetType="MenuFlyoutPresenter">
<Setter Property="RequestedTheme" Value="Dark"/>
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeHighBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource FlyoutBorderThemeThickness}" />
<Setter Property="Padding" Value="{ThemeResource MenuFlyoutPresenterThemePadding}" />
<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="{ThemeResource FlyoutThemeMaxWidth}" />
<Setter Property="MinHeight" Value="{ThemeResource MenuFlyoutThemeMinHeight}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuFlyoutPresenter">
<Grid Background="{TemplateBinding Background}">
<ScrollViewer x:Name="MenuFlyoutPresenterScrollViewer"
Padding="{TemplateBinding Padding}"
Margin="{TemplateBinding BorderThickness}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
AutomationProperties.AccessibilityView="Raw">
<ItemsPresenter/>
</ScrollViewer>
<Border x:Name="MenuFlyoutPresenterBorder"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and use it for your fluout:
<MenuFlyout MenuFlyoutPresenterStyle="{StaticResource MenuFlyoutPresenterStyle}">
<MenuFlyoutItem Text="one"/>
<MenuFlyoutItem Text="two"/>
</MenuFlyout>
any one Kindly help me solve this problem and i have no idea about this
only i have wpf xaml code without class file.... i don't know how to create a class file for this xaml code and i took this xaml code from this Link how to handle group subtotal and e.g. target rows in WPF DataGrid?
<my:ExtendedDataGrid.FooterDataTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Rows Count:" FontWeight="Bold"/>
<TextBlock Margin="3,0,0,0" Foreground="DarkGreen"
Text="{Binding ElementName=dgReport, Path=Items.Count}"/>
</StackPanel>
</DataTemplate>
</my:ExtendedDataGrid.FooterDataTemplate>
<my:ExtendedDataGrid.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander Background="Gray" HorizontalAlignment="Left" IsExpanded="True"
ScrollViewer.CanContentScroll="True">
<Expander.Header>
<DataGrid Name="HeaderGrid" ItemsSource="{Binding Path=.,
Converter={StaticResource SumConverter}}"
Loaded="DataGrid_Loaded" HeadersVisibility="Row"
Margin="25 0 0 0" PreviewMouseDown="HeaderGrid_PreviewMouseDown">
<DataGrid.Style>
<Style TargetType="DataGrid">
<Style.Triggers>
<DataTrigger Binding="{Binding
RelativeSource={RelativeSource AncestorType=Expander},
Path=IsExpanded}" Value="True">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.Style>
</DataGrid>
</Expander.Header>
<StackPanel>
<ItemsPresenter/>
<DataGrid Name="FooterGrid"
ItemsSource="{Binding ElementName=HeaderGrid, Path=ItemsSource, Mode=OneWay}"
Loaded="DataGrid_Loaded" HeadersVisibility="Row" IsReadOnly="False"
Margin="0" RowHeight="25" CanUserAddRows="False">
<DataGrid.Style>
<Style TargetType="DataGrid">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Expander}, Path=IsExpanded}"
Value="False">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.Style>
</DataGrid>
</StackPanel>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</my:ExtendedDataGrid.GroupStyle>
</my:ExtendedDataGrid>
thanking you