How to disable border of WPF button when click it? - wpf

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.

Related

Strange border still resding on button; even after modifying the control template

I have a 'feedback' button which has this strange border:
So I searched online for some solutions and modified the control template, and I got this:
Control Template code:
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter Content="{TemplateBinding Content}" />
</ControlTemplate>
</Button.Template>
So even after modifying the control template - I am getting a strange brown border. Help would be appreciated regarding this.
Button code:
<Button Grid.Row="3"
Grid.Column="2"
Grid.RowSpan="2"
Style="{StaticResource IconStyleBase}"
Name="Feedback_Button">
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter Content="{TemplateBinding Content}" />
</ControlTemplate>
</Button.Template>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="218*" />
<RowDefinition Height="68*" />
</Grid.RowDefinitions>
<!--Icon-->
<Button Background="#3767B0"
Style="{StaticResource IconStyleContent}">
<!--Content-->
<Button.ContentTemplate>
<DataTemplate>
<Viewbox>
<TextBlock Padding="55"></TextBlock>
</Viewbox>
</DataTemplate>
</Button.ContentTemplate>
</Button>
<!--Icon Text-->
<Button Background="#FF2D5BA0"
Style="{StaticResource IconStyleSubBase}">
<!--Content-->
<Button.ContentTemplate>
<DataTemplate>
<Viewbox>
<TextBlock Padding="15">Feedback</TextBlock>
</Viewbox>
</DataTemplate>
</Button.ContentTemplate>
</Button>
</Grid>
</Button>
A DataTemplate defines the appearance of the the items that you set as Content of a button, but the button itself as a container has a default style and control template that defines how it looks like, along with its different states like mouse-over or pressed. That is where the border comes from.
You can try to create a style that sets the BorderThickness to 0 and apply it on each of your buttons. This approach works for control templates that bind the border thickness from their templated parent.
<Style x:Key="BorderlessButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="BorderThickness" Value="0"/>
</Style>
If this does not work or you want adapt the appearance of your buttons in detail, you have to extract and adapt the button style and control template.
Your custom control template does not work, because you did not apply it to the inner buttons and you should remove Content="{TemplateBinding Content}". Nevertheless, your button control template does not define any control states, so it will not be responsive at all.
You should copy the control template for Button from here, or extract it manually via Blend or Visual Studio. Then you can remove or the Border within it, change its thickness or color, so it will disappear. Moreover, you can adapt its various states to fit your desired style.
A notice on your design. It do not think that it is a good idea to nest buttons. Your control should either be a single button or a panel with two buttons in it, but that also only makes sense if they execute different actions in a related context, like split buttons do.

How do I make a small image button with WPF

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.

Should I use a ContextMenu to show a couple of buttons?

I am developing a WPF application and I want the following functionality: If a user right clicks on a progress bar a small context menu should popup at the clicked position. This menu should just contain a couple of buttons which are lined up horizontally. Should I use the ContextMenu for this or are there better suitable WPF elements?
I tried a ContextMenu and this is how it looks like:
This is the XAML:
<ProgressBar x:Name="PgF" Height="10" Value="{Binding Path=FileCurrentMs}" Maximum="{Binding Path=FileLengthMs}">
<ProgressBar.ContextMenu>
<ContextMenu>
<StackPanel Orientation="Horizontal">
<Button Content="A"/>
<Button Content="B"/>
<Button Content="C"/>
</StackPanel>
</ContextMenu>
</ProgressBar.ContextMenu>
</ProgressBar>
In the ContextMenu I have the space to the left and to the right which I don’t want and I read in other posts that it is not simple just to remove this space. Any ideas?
Try like this :
<ProgressBar x:Name="PgF" Height="10" Value="{Binding Path=FileCurrentMs}" Maximum="{Binding Path=FileLengthMs}">
<ProgressBar.ContextMenu>
<ContextMenu>
<MenuItem>
<MenuItem.Template>
<ControlTemplate>
<StackPanel Orientation="Horizontal">
<Button Content="A" Margin="2"/>
<Button Content="B" Margin="2"/>
<Button Content="C" Margin="2"/>
</StackPanel>
</ControlTemplate>
</MenuItem.Template>
</MenuItem>
</ContextMenu>
</ProgressBar.ContextMenu>
</ProgressBar>
You need to put all buttons in a single menu item :) good luck

WPF change button image from code behind

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(...));

Get rid of button border in WPF?

i am trying to get rid of button border and only display text, however a thin line around the text gets displayed even though i set borderThickness to 0 and borderbrush to transparent.
my xaml code for save button:
<Button Content="save" Name="btnSaveEditedText"
Background="Transparent"
Foreground="White"
FontFamily="Tw Cen MT Condensed"
FontSize="30"
Margin="-280,0,0,10"
Width="60"
BorderBrush="Transparent"
BorderThickness="0"/>
Is there anyway i can get rid of the button border?
You need to override the ControlTemplate of the Button:
<Button Content="save" Name="btnSaveEditedText"
Background="Transparent"
Foreground="White"
FontFamily="Tw Cen MT Condensed"
FontSize="30"
Margin="-280,0,0,10"
Width="60"
BorderBrush="Transparent"
BorderThickness="0">
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter Content="{TemplateBinding Content}"/>
</ControlTemplate>
</Button.Template>
</Button>
The method that I recently found to be most useful for this was to have your button use the style of a toolbars. This will only use the image or text while only showing button borders on mouse over.
<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
Content="save"
Name="btnSaveEditedText"
Background="Transparent"
Foreground="White"
FontFamily="Tw Cen MT Condensed"
FontSize="30"
Margin="-280,0,0,10"
Width="60"
BorderBrush="Transparent"
BorderThickness="0" />
You need to create a new Template for your buttons.
The easiest way to do this is open your project in Expression Blend, select the button and then right click and select "Edit Template > Edit a Copy..". This copies the existing template into one you can modify. It's easier if you create it in a resource dictionary.
Then select the template and on the Resource tab (on the right of the UI) select the ButtonFocusVisual. Select the Properties tab and expand the Miscellaneous section. This has BorderStyle and BorderThickness fields (among others). Set the style to None.
Templates will not solve this problem, your only course of action is to modify the WPF control. The solution is here:
How to remove ButtonChrome border (when defining the template of a border)?

Resources