How to change style for WPF text box and calender - wpf-controls

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.

Related

How can I change property control by code?

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>

How to set the theme of a MenuFlyout in UWP?

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>

how to show sup Total in WPF datagrid?

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

mahapps.metro using icons styles with datatrigger

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.

Adding a Combobox column in infragistics XamDataGrid

How can I add a WPF ComboBox Column to Infragistics XamDataGrid?
Try this example
<dataPresenter:XamDataGrid x:Name="StudentDataGrid" DataSource="{Binding StudentList}">
<dataPresenter:XamDataGrid.FieldLayoutSettings>
<dataPresenter:FieldLayoutSettings AutoGenerateFields="False" AutoFitMode="Always" AddNewRecordLocation="OnTopFixed" AllowAddNew="True" AllowDelete="True"/>
</dataPresenter:XamDataGrid.FieldLayoutSettings>
<dataPresenter:XamDataGrid.FieldLayouts>
<dataPresenter:FieldLayout>
<dataPresenter:Field Name="Name" Label="Student Name"/>
<dataPresenter:Field Width="Auto" Name="Department" Label="Dept">
<dataPresenter:Field.Settings>
<dataPresenter:FieldSettings>
<dataPresenter:FieldSettings.EditorStyle>
<Style TargetType="{x:Type igEditors:XamComboEditor}">
<Setter Property="ItemsSource" Value="{Binding DataPresenter.DataContext.DepartmentList}" />
<Setter Property="IsEditable" Value="True" />
<Setter Property="Text" Value="-Select-" />
<Setter Property="DisplayMemberPath" Value="DeptName" />
<Setter Property="ValuePath" Value="DeptName" />
</Style>
</dataPresenter:FieldSettings.EditorStyle>
</dataPresenter:FieldSettings>
</dataPresenter:Field.Settings>
</dataPresenter:Field>
<dataPresenter:Field Name="Count" Label="Count"/>
</dataPresenter:FieldLayout>
</dataPresenter:XamDataGrid.FieldLayouts>
</dataPresenter:XamDataGrid>
You can use the XamComboEditor to edit fields in the XamDataGrid:
http://help.infragistics.com/NetAdvantage/WPF/2011.1/CLR4.0/?page=xamComboEditor_Using_xamComboEditor_to_Edit_a_Field_in_xamDataGrid.html
Alan

Resources