I would like to check which image is applied to the button and change it in code behind.
<Button x:Name="btnFlashAlert" Content="Button" Canvas.Left="87" Canvas.Top="258" Background="{x:Null}" Margin="136,244,409,215" BorderBrush="{x:Null}" BorderThickness="0" Cursor="Hand" Click="btnFlashAlert_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Main/Images/FlashButton.png" Name="image"/>
</ControlTemplate>
</Button.Template>
</Button>
My goal is to make the button flash with different color button images not colors when certain values are met to inform the user they have certain types of messages waiting
You may bind the Source property to the Button's Content:
<Button x:Name="btnFlashAlert">
<Button.Template>
<ControlTemplate TargetType="Button">
<Image Source="{TemplateBinding Content}"/>
</ControlTemplate>
</Button.Template>
<Button.Content>
<BitmapImage UriSource="Main/Images/FlashButton.png"/>
</Button.Content>
</Button>
You may now set the Content to any other ImageSource in code:
btnFlashAlert.Content = new BitmapImage(new Uri(...));
Related
I want to instantiate two Controls (an Expander and a Button) from two ControlTemplates. They are docked in a Dockpanel (right and left). The Expander is visible and it works fine, but the Button isn't visible.
The ControlTemplate of the Button in App.xaml:
...
<ControlTemplate x:Key="OpenFileButton" TargetType="{x:Type Button}">
<Image Name="OpenFileButton" Source="F:\AudioNodeGUI_XAML\images\filebutton.jpg">
</Image>
</ControlTemplate>
...
And the instantiation in a usercontrol:
<Grid>
<Image Source="F:\AudioNodeGUI_XAML\images\FileInputNode.jpg"/>
<DockPanel Name="dock" Width="151" Height="20" Margin="27,53,122,139">
<Expander Name="expander" Template="{StaticResource FileExpander}" Height="20" Width="41" PreviewMouseLeftButtonUp="expand" DockPanel.Dock="Left">
<ListView Name="usedFiles" Background="Black" BorderBrush="Transparent" BorderThickness="0" Width="140" Height="120" Opacity="0.5">
</ListView>
</Expander>
<Button Name="OpenFileButton" Template="{StaticResource OpenFileButton}" DockPanel.Dock="Right" />
</DockPanel>
</Grid>
But the Button isn't visible, neither in the Designer (just the outline) nor in execution. What am I doing wrong?
I suspect that your issue is just incorrect path to the image file. Unfortunately you won't have any tip about this kind of error neither in designer nor in output window. However if you have ReSharper it should highlight the path to the file if it doesn't exist
I'm trying to create a small (21 x 21) button that has an image on it. I want all of the normal behavior/effects of a normal button, except the image should take up most of the button's face.
I created the button:
<Button Grid.Column="2" Height="21" Width="21" HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="{StaticResource CloseButton}"
Height="21" Width="21"
HorizontalAlignment="Center" VerticalAlignment="Center">
</Image>
</Button>
The image ends up squished, it looks like because of the default margin of the button?
I tried this answer which renders correctly, but then I lose the nice mouse-over effects and "click" look of the button.
The image itself is 21x21.
How can I get the effect I'm after?
Try This way, I am having the image and mouse over property in it.
<Button Width="25" Height="25">
<Image Width="21" Height="21" HorizontalAlignment="Center">
<Image.Source>
<BitmapImage UriSource="../images/icon.png"/>
</Image.Source>
</Image>
</Button>
In answer you attached target type of ControlTemplate is missing. It should be:
<ControlTemplate TargetType="{x:Type Button}">
...
</ControlTemplate>
It says your control template to have behavior of control you specify (in this case - Button)
Hope, it helps.
I am making a template control so that I can have a button with an image that changes when you click it. I also am trying to get text on top of the button that can change at run time. I have the button images and everything working but I can't seem to get that label at runtime so I can change the text. Here is the code in the xaml. I am missing the code behind
<UserControl.Resources>
<ControlTemplate TargetType="{x:Type Button}" x:Key="ActionButton">
<Grid>
<Label Panel.ZIndex="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Arial" Name="lblText" Foreground="#5E4421" FontWeight="Bold" FontSize="14">Test</Label>
<Image Name="Normal" Source="/AssaultWare.Controls;component/Replayer/Images/button_off.png"/>
<Image Name="Pressed" Source="/AssaultWare.Controls;component/Replayer/Images/button_on.png"/>
<Image Name="Disabled" Source="/AssaultWare.Controls;component/Replayer/Images/button_off.png" Visibility="Hidden"/>
</Grid>
<ControlTemplate.Triggers>
...
</ControlTemplate.Triggers>
</ControlTemplate>
</UserControl.Resources>
<Button Canvas.Left="471" Canvas.Top="465" Template="{StaticResource ActionButton}" Name="btnRight"/>
Difficult to decipher your question, but I think you just need to change the Label to a ContentControl and bind its Content property to the Button's Content property:
<ContentControl Content="{TemplateBinding Content}" .../>
If I create a button with an image inside, it gets blown up to much larger size than the image.
If i try to constrain the size of image, and container button, the image gets cut off:
<Button Background="Transparent" Width="18" Height="18" Margin="0,0,0,0" Padding="0,0,0,0" BorderBrush="{x:Null}">
<Image Width="16" Height="16" />
</Button>
Native image size is 16x16. Here the button is 18x18 with 0 padding, yet the image still gets cut-off on right/bottom.
how can i make the entire button be exactly the size of the image w/out any cut off?
The beauty (and curse?) of WPF is the ability to re-template controls.
You can set the template of the button something like the following (this is free hand, so you will need to tweak it a bit for your tastes):
<Button x:Name="btn16x16">
<Button.Template>
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image Source="pack://siteoforigin:,,,/Resources/SixteenBySixteen.png"
Width="16"
Height="16"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
You should remove any Width and Height settings and set the Button's HorizontalAlignment and VerticalAlignment both to Center (or Left/Right or Top/Bottom resp.). By default, these properties are set to Stretch which makes the button stretch to the available space. Since the image is the content of the button, it also gets stretched. Something like this should work:
Take this code example:
<Button Background="Transparent" BorderBrush="{x:Null}" HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="thePathToYourImage" Stretch="None"/> <!-- EDIT: added Stretch="None" here! -->
</Button>
.
The following was just meant as an alternative with a different result which obviously (considering your comments) is not what you want.
If you want the button to stretch, but not the image, you could also set the Image's alignment properties to something other than Stretch. Or you could set its Stretch property to None. This would make the button as large as possible, but keep the image at its original size (16x16). This would work as follows:
<Button Background="Transparent" BorderBrush="{x:Null}">
<Image Source="thePathToYourImage" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Button>
<!-- OR: -->
<Button Background="Transparent" BorderBrush="{x:Null}">
<Image Source="thePathToYourImage" Stretch="None"/>
</Button>
You can use Button.Background and ImageBrush as an exampe like this:
<Button Height="24" Width="24" >
<Button.Background>
<ImageBrush ImageSource="image name or path" Stretch="Fill" TileMode="None" />
</Button.Background>
</Button>
Think this might give people the answer they are looking for, buttons with image and no borders at all.
How to disable border of WPF button when I click it?
I have create button like below, everything work fine except when I click on the button.
<Button Background="Transparent" BorderBrush="Transparent">
<Button.Content>
<StackPanel>
<Image Source="xxx.png" />
<TextBlock Text="Change Password" />
</StackPanel>
</Button.Content>
</Button>
When I click the button, it has border like below.
alt text http://www.freeimagehosting.net/uploads/8ece306bd4.png
I try to create style for FocusVisualStyle of the button but it don't work as I expect, this problem also occur when I set IsDefault="True" too.
I know this is an old question, but felt I could answer.
If I understand the problem correctly, after you click the button and move on, a border remains around it. When you click on some other item, like a TextBox or another Button, the border disappears.
This "border" is the "focus" indicator.
To prevent this, set "Focusable" to "False" on the Button:
<Button Background="Transparent" BorderBrush="Transparent" Focusable="False">
<Button.Content>
<StackPanel>
<Image Source="xxx.png" />
<TextBlock Text="Change Password" />
</StackPanel>
</Button.Content>
</Button>
You may have to change the button template, this will give you a button with no frame what so ever, but also without any press or disabled effect:
In your Window.Resources element:
<Style TargetType="Button" x:Key="TransparentButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="Transparent">
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And the button:
<Button Style="{StaticResource TransparentButton}">
<Button.Content>
<StackPanel>
<Image Source="xxx.png" />
<TextBlock Text="Change Password" />
</StackPanel>
</Button.Content>
</Button>
Now, if you need a little more visual feedback start with this template:
http://msdn.microsoft.com/en-us/library/ms753328.aspx
and remove things until you get what you want.
Don't forget to add a transparent background to your elements, if you don't have one, or have a null background the transparent area inside teh button will not be clickable.