I am work on login page in my WPF application, I want the background image for login keypad buttons to change to two different states,not press (Default)show in image background (keypad_button.png), when pressed(IsPressed)(keypad_button_pressed.png). i tried to make this, and i succeeded to make the background button change when i pressed it (IsPressed Trigger), but the problem is in default background image ??
How to make default background image for button is appear, then when i pressed the button it change to another background image ?
Here's my Style :
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="1"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/RestaurantPOS;component/images/buttons/keypad_button_pressed.png"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" Value="0.25" />
<Setter Property="BorderBrush" Value="Transparent" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
This is my keypad buttons : (the style only applied on button number 7)
<Button x:Name="txb7" Click="txb7_Click" Content="7" HorizontalAlignment="Left" Margin="181,117,0,0" VerticalAlignment="Top" Width="72" Height="57" Style="{StaticResource ImageButton}" FontWeight="Bold" FontSize="18"></Button>
as you shewing, button number 7 default background don't appear(blue), but when i pressed it the (keypad_button_pressed.png) is work. how can i solve this issue.
I Do not want to used ToggleButton.
You can write one more trigger to check IsPressed is false and in this trigger you can set default image.
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="1"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/RestaurantPOS;component/images/buttons/keypad_button_pressed.png"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="False">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/RestaurantPOS;component/images/buttons/keypad_button.png"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" Value="0.25" />
<Setter Property="BorderBrush" Value="Transparent" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Related
I have a textbox in my wpf, when I disable it the opacity decrease. This happens to tell the user that the textbox is not enable. Is there any way to disable a control and keep the look as the same?
Use IsHitTestVisible="False" instead of IsEnabled="False"
Set the Template property to your own custom ControlTemplate:
<TextBox IsEnabled="False" Margin="10">
<TextBox.Template>
<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="#FF7EB4EA"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</TextBox.Template>
</TextBox>
Please keep in mind i am new with WPF, I am trying to give my Button a border thickness value via .Xaml templates, However, its not working, Here is my .Xaml:
<Button>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#FFFFFFFF" />
<Setter Property="Foreground" Value="#FFF01F1F" />
<Setter Property="BorderBrush" Value="#FFF01F1F" />
<Setter Property="BorderThickness" Value="5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="#FFF01F1F" />
<Setter Property="Foreground" Value="#FFFFFFFF" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Thanks in Advance.
Update:::
I have tried the Change Thickness answer, however now it disables my IsMouseOver property,
You set your own custom template which doesn't use the BorderThickness property of the button itself, so it should be:
<Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
Or you can set it to 5 directly on the template.
scenario:
When using default implementation of button the below functionality works:
When canExeucte command is true -> the button is enabled and button background is not changed.
When CanExecute command is false -> the button is disabled and background is "grayed".
But When using Button ControlTemplate style and CanExecute is false -> the button is disabled as expected but background is not changed.
How can I change the background of the Control Template button ?
image :
https://onedrive.live.com/redir?resid=3A8F69A0FB413FA4!125&authkey=!ALh_kjfxMMNzhSY&v=3&ithint=photo%2cpng
Control Template:
<!--button-->
<ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
<Border x:Name="border" CornerRadius="0" Background="Green" BorderBrush="#FF06A6F0" BorderThickness="1" Opacity="1" Width="147" Height="50" >
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0.8" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="StyleButtonTemplate" TargetType="{x:Type Button}">
<Setter Property="Template" Value="{DynamicResource ButtonTemplate}" />
<Setter Property="FontSize" Value="18pt" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Button.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="140" ShadowDepth="5" BlurRadius="5" Opacity="0.1" />
</Setter.Value>
</Setter>
</Style>
When you re-template a control, all the visual states should be managed by yourself. In this case the disabled state is ignored. For a simple way using Trigger to change the Background if IsEnabled is false:
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0.8" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="border" Property="Background" Value="Gray"/>
</Trigger>
</ControlTemplate.Triggers>
Is it possible to have an element HitTestVisible without it showing a (blue) border around the element when the mouse enters the element?
You have to override ControlTemplate of RichTextBox to remove that feature.
<RichTextBox Cursor="Arrow">
<RichTextBox.Template>
<ControlTemplate TargetType="TextBoxBase">
<Border
BorderThickness="{TemplateBinding Border.BorderThickness}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Background="{TemplateBinding Panel.Background}"
Name="border"
SnapsToDevicePixels="True">
<ScrollViewer
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
Name="PART_ContentHost"
Focusable="False" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="UIElement.Opacity"
TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="UIElement.IsKeyboardFocused" Value="True">
<Setter Property="Border.BorderBrush" TargetName="border">
<Setter.Value>
<SolidColorBrush>#FF569DE5</SolidColorBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</RichTextBox.Template>
</RichTextBox>
I have a Devexpress DateEdit and added a trigger for when IsEnabled=False to change the ControlTemplate to be a Label. This all works fine, but my problem is, that the Text of the Label is still Grayed out(Disabled).
My style:
<Style x:Key="DateTimeDropDownStyle" TargetType="{x:Type dxe:DateEdit}">
<Setter Property="Mask" Value="dd MMM yyyy"/>
<Setter Property="MaskUseAsDisplayFormat" Value="True"/>
<Style.Triggers>
<Trigger Property="dxe:DateEdit.IsEnabled" Value="False">
<Setter Property="dxe:DateEdit.Template">
<Setter.Value>
<ControlTemplate>
<Label Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text, StringFormat={}{0:dd MMM yyyyy}}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
So, my question is, how do i change the Style so that the Label is not disabled?
Try setting Foreground on the Label in your template.
If it doesn't help, you'd have to edit the control template for the label. A basic one is:
<ControlTemplate TargetType="{x:Type Label}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter Margin="{TemplateBinding Padding}"/>
</Border>
<ControlTemplate.Triggers>
<!--This is the trigger to remove-->
<Tirgger Property="IsEnabled"
Value="False">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>