I am using two button in WPF i want to change their image ie image button on DIsable how to do it can any one help me?
In WPF an Image button is simply a Button with its Content set to an image. So, if you want to change the image, you simply need to assign another image to the Content property of the Button.
You cann't change Image, since in WPF Button is just a button as #Daniel Hilgarth wrote. However you can make new style for button like - and apply it to your buttons. This might work like your requirements.
<Style x:Key="BtnStyle" TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<!--Image-->
<Image x:Name="BtnImage" Stretch="Fill" />
<ContentPresenter Margin="2" HorizontalAlignment="Center" RecognizesAccessKey="True" VerticalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<!--Trigger for IsEnabled-->
<Trigger Property="IsEnabled" Value="false">
<!--Set the source of the image-->
<Setter TargetName="BtnImage" Property="Source" Value="pack://application:,,,/YouAppShortName;component/Image.png" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I've tried all kinds of template binding and such to get this to work, but if I use this style on a control, the internal textbox control doesn't show focus.
I'm doing this because I want to set an error template that wraps around the textbox and the spot reserved for displaying units.
Now, typing in the box correct updates the text inside. And clicking on it will show the highlighted border and input caret, but tabbing into it won't.
<Style x:Key="Special" TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<DockPanel
LastChildFill="True"
Visibility="Visible">
<Border
Name="PART_UnitContainer"
DockPanel.Dock="Right"
Visibility="Collapsed">
<Label
Content="ft"
Style="{DynamicResource UnitLabel}"
/>
</Border>
<TextBox Name="PART_Control" Text="{Binding Text, RelativeSource={RelativeSource TemplatedParent}}"/>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="PART_UnitContainer" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Initially I set the whole control as no tab stop, and internal one with tabstop, but apparently you also have to set the tab navigation to continue. I didn't when I tried playing with navigation, so I overlooked this setting.
<Style x:Key="Special" TargetType="{x:Type TextBox}">
<Setter Property="KeyboardNavigation.TabNavigation" Value="Continue"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<ControlTemplate>
...
<Text IsTabStop="True" Name="PART_Control" ...
...
</ControlTemplate>
</Setter>
</Style>
However, this little trick doesn't work for shift-tab out of an editable combobox. I'll update the answer if I figure it out.
For comboboxes you have to do it differently. You don't set TabNavigation to Continue, and you don't set IsTabStop on internal combobox to true.
See
<Style x:Key="Special" TargetType="{x:Type ComboBox}">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<ControlTemplate>
...
<ComboBox Name="PART_Control" ...
...
</ControlTemplate>
</Setter>
</Style>
I'm trying to style a WPF button to have rounded corners and a black border. Following multiple examples online I came up with the following style:
<Style x:Key="MyBlackButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="#FF282828"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Height" Value="40"/>
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="ButtonGrid">
<Border CornerRadius="5" BorderBrush="Black" BorderThickness="1" Background="{TemplateBinding Background}">
<Grid Margin="10,0,10,2">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button Content="My button" Style="{StaticResource MyBlackButton}" />
This almost looks good, except the border isn't displayed properly at the top and bottom of the button, as you can see from the following zoom on the actual button:
To try to isolate the problem I added a much thicker border to see if there was any changes. As you can see on the next picture there is a sort of "border" inside the button:
So with a thin border, the border looks blurred at the top and bottom of the button, and with a thick border an inner border is visible (which I guess is visible on top of the thin border making it look blurred).
What is going on here? Why can't I get a pretty border around the button?
It is the anti-aliasing which is causing this.
Try setting
RenderOptions.EdgeMode="Aliased"
on your button.
Try this
Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" >
I know there are a few questions surrounding the MahApps Metro styles, but i haven't found one that address the issue I am having.
I have an app that I am maintaining, a lot of which I helped build, using a central style XAML repository.
A part that I didn't build uses the style for the Metro Circle Toggle Button from MahApps. According to my Stakeholders, I need to change the selected state to be more contrasting from the normal state of the button. However I haven't been able to find where to go to access that style in my application.
My gut instinct is to create a complete style in my repository that replaces the Metro Style, but I figured I would ask around to see if anyone here could help me.
Any Hints wold be greatly appreciated.
Update 1:
I tried to use the BasedOn property to keep the amount of code down. I then set the background color to switch from black to white when "IsChecked" is True.
here is the code i added:
<Style x:Key="CustomCircleToggleButtonStyle"
TargetType="{x:Type ToggleButton}"
BasedOn="{StaticResource MetroCircleToggleButtonStyle}">
<Setter Property="Background" Value="{StaticResource DarkBorder}"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True" >
<Setter Property="Background" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
Unfortunately, there is some animation form the MahApps sinking through that makes the button go from the black, immediately to white then fade to the dark blue color that i am trying to get rid of.
Here is the wpf toggle button:
<ToggleButton Width="50" IsEnabled="{Binding IsMultipleSelected,Converter= {StaticResource BooleanNegate}}"
Height="50"
Style="{DynamicResource CustomCircleToggleButtonStyle}"
Command="{Binding Path=GroupSelectCommand}"
IsChecked="{Binding IsLasoSelected}">
<Rectangle Width="20"
Height="20"
Fill="{DynamicResource IconButtonActiveBorder}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill"
Visual="{DynamicResource appbar_lasso}" />
</Rectangle.OpacityMask>
</Rectangle>
</ToggleButton>
I am hoping to move a lot of this into the style, but I have to keep functional.
Right, so the reason it's not working with your example is you can't overwrite triggers that interact with ControlTemplate via Triggers from the Style....
So, if we go take a peek at line 615 here (which btw, I assume there's a file in your metro stuff named the same) we see inside the template the ControlTemplate.Triggers which on IsChecked is changing the opacity of ellipsebg ellipse. It in turn is hard set to fill of {DynamicResource AccentColorBrush}...
So...you could overwrite that brush at the instance level....or, just go edit the full style template to use a different brush all together.
In other words you could go change line 630 of Fill="{DynamicResource AccentColorBrush}" to another brush or brush resource and it would inherit to each instance (that would be my choice to keep centrally maintainable properties).
Or, at the instance something like:
<StackPanel>
<StackPanel.Resources>
<SolidColorBrush x:Key="AccentColorBrush">Red</SolidColorBrush>
<Style TargetType="ToggleButton"
BasedOn="{DynamicResource CustomCircleToggleButtonStyle}"/>
</StackPanel.Resources>
<ToggleButton/>
<ToggleButton/>
<ToggleButton/>
</StackPanel>
Make sense? :)
To close the loop, and post my answer for everyone else with the issue, I ended up creating a style that i put in my style repository. I think my Solution might be a little unique though as i don't actually have access the the MahApps.Metro source code in my solution.
Here is what I did:
<Style x:Key="CircleButton" TargetType="ToggleButton">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisual}"/>
<Setter Property="Margin" Value="2 2 2 2"/>
<Setter Property="Width" Value="45"/>
<Setter Property="Height" Value="45"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Ellipse x:Name="BorderCircle">
<Ellipse.Fill>
<SolidColorBrush Color="SlateGray"/>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="BodyCircle" Margin="3" >
<Ellipse.Fill >
<SolidColorBrush Color="Black"/>
</Ellipse.Fill>
</Ellipse>
<Rectangle x:Name="Mask"
Width="20"
Height="20"
Fill="{DynamicResource IconButtonActiveBorder}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill"
Visual="{DynamicResource appbar_lasso}" />
</Rectangle.OpacityMask>
</Rectangle>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="BodyCircle" Property="Fill" Value="White"/>
<Setter TargetName="BorderCircle" Property="Fill" Value="Black"/>
<Setter TargetName="Mask" Property="Fill" Value="Black"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="BodyCircle" Property="Fill" Value="DarkOrange"/>
<Setter TargetName="BorderCircle" Property="Fill" Value="Black"/>
<Setter TargetName="Mask" Property="Fill" Value="Black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This gives me total control of all aspects of the toggle button and the identical look as it had before. All i have to do to implement it is call it from the WPF view:
<ToggleButton IsEnabled="{Binding IsMultipleSelected,Converter={StaticResource BooleanNegate}}"
Style="{DynamicResource CircleButton}"
Command="{Binding Path=GroupSelectCommand}"
IsChecked="{Binding IsLasoSelected}">
</ToggleButton>
Hope this helps others out.
I have problem with my button style. And when the cursor is in the button is can't click (if is not in the content or in the border of the element.
My xaml code:
<Button Style="{StaticResource DataButton}" Content="OK" Command="{Binding OKButton}" MinWidth="72" Height="22" Margin="5" />
My static resource
<Style x:Key="DataButton" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border" BorderThickness="2" BorderBrush="#d6d6d6" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How can I fix this the user can click on button whatever is in the button perimeter.
Remove <Setter Property="OverridesDefaultStyle" Value="True" /> from the code. As you have replaced the built in style of Button, it no longer recognizes the click action defined in the Theme.
You have overrided default style and set Alignment to Center. You can remove overrideDefaultStyle or remove alignment, or you can make your layout in the other way.
In my WPF web app I have an image and a textblock inside of a stack panel, making a button. I have it set up so that if I mouseOver the image, it changes the source of the image so that another image appears(same image, but grayed-out). Also, if you mouseOver the textblock the text color changes from black to gray. How do I get both of these things to happen at once if the mouse rolls over either, or over the StackPanel that houses the items? My code:
<StackPanel x:Name="IntegrationRequestLinkStackPanel">
<Button x:Name="IntegrationRequestLinkButton" Content="Integration Request">
<Button.Template>
<ControlTemplate>
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Propery="Source" Value+"Images/requestNew.png" />
<Setter Property="Cursor" Value="Hand" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="Images"requestNewBW.png" />
</Trigger>
</Style.Trigger>
</Style>
</Image.Style>
</Image>
</ControlTemplate>
</Button>
</Button>
<Textblock Text="Integration Request"............
The code for the Textblock is pretty much the same as for the button. Really I want the whole stack panel to be the button and when mouseOver the image inside changes and the text changes color.
The way you describe it, you want a button with an image and label as its content. You can place both in the template.
<Button x:Name="IntegrationRequestLinkButton"
Content="Integration Request">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Foreground" Value="Black" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<DockPanel LastChildFill="True">
<Image x:Name="Icon"
DockPanel.Dock="Left"
Stretch="None"
Margin="0,0,5,0"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Source="Images/requestNew.png" />
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Icon"
Property="Source"
Value="Images/requestNewBW.png" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Gray" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Typically, one adjusts inherited properties which apply to the entire control (like Foreground) using triggers on the Style as opposed to the Template. Use template triggers when you need to change a specific element defined by your template.
As a matter of style, it seems odd that you would want to show black text and a color image by default, and gray text and a grayscale image on mouse-over. I would expect you to want the opposite.
First off, I'm not sure what you mean by "WPF web app". If you mean Silverlight, I have only tested this code in a desktop application, so your results may differ.
If you want the whole thing (image + text) to be a button, I would say that the best thing is to make the template of the button the StackPanel, rather than the other way around. Here is some code:
<Button>
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Background="Transparent">
<StackPanel>
<Image x:Name="buttonImage"
Width="30" Height="30"
Source="Images/requestNew.png"></Image>
<TextBlock x:Name="buttonText"
Text="Integration Request"></TextBlock>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="buttonImage"
Property="Source" Value="Images/requestNewBW.png"></Setter>
<Setter TargetName="buttonText"
Property="Foreground" Value="Red"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
So, this is a button with a template containing a StackPanel with a image and a text block which change when you mouse over any part of the button
You'll notice that I added a grid with a transparent background. You can remove it, what it does is it makes the whole rectangular area of the button trigger the change of the IsMouseOver property (if it wasn't there, it would only trigger when the mouse is over the image or the text itself).