I just need a button so simple that it looks like a TextBlock. Some time ago I saw an answer on SO to style the button based on a static style for a button in a menu but I cannot find that answer (and I have been searching for an hour). Does anyone know what system style I am referring to and the syntax to apply that style to a button?
Is it maybe the style used for a button in a ToolBar that you're referring to? The ToolBar control overrides the Button style so they appear flat. You can apply that style to a button like this...
<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" />
If you want a button that looks like a TextBlock, you can make a button that is a TextBlock.
<Button Content="I'm a Button; click me">
<Button.Template>
<ControlTemplate TargetType="Button">
<TextBlock Text="{TemplateBinding Content}" />
</ControlTemplate>
</Button.Template>
</Button>
Related
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.
I have a simple override of the Control Template for a button in WPF that looks like this.
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle x:Name="ButtonRectangle" Fill="{StaticResource BlueBrush}"/>
<ContentPresenter Panel.ZIndex="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
Typically the button will contain text "OK", "Cancel", etc. If the button is ever disabled I want the text Foreground property to update to a disabled text style. I haven't found any way to let the content in the content presenter know that it is disabled. Where am I going wrong with this one?
I have some userControl that contain simple button.
I want to bind the button Content to the userControl Content - How to do it?
Set a name for the user control (for example x:Name="self") and in the Button
<Button Content={Binding ElementName=self}" />
Do you mean this or something else?
If the Button is inside the UserControl it is part of the UserControl's Content and can't recursively contain itself. The whole purpose of a UserControl is that you're explicitly defining a fixed set of Content. If you want variable Content then you should use a templated ContentControl something like this:
<ContentControl Content="{Binding SomeVariableValue}">
<ContentControl.Template>
<ControlTemplate TargetType="{x:Type ContentControl}">
<Border>
<!-- Other content from your user control -->
<Button Content="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
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)?
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.