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}}" >
Related
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.
I have set up the following control template and style as the default style for all Tooltips in my application:
<Style TargetType="{x:Type ToolTip}">
<!-- Background="Transparent" BorderBrush="Transparent" BorderThickness="0" HasDropShadow="True" -->
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Placement" Value="Bottom"></Setter>
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Background="{Binding Source={x:Static visualResources:ThemeManager.Instance}, Path=ThemePageColor}" >
<ContentPresenter Margin="3"></ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
(The code above is in the Window.Resources)
And inside the same window I have this control:
<Button ToolTip="Tooltip Text!" HorizontalContentAlignment="Right" Height="60" Click="_Button_AddCourse_Click"/>
But when I run my program the tooltips don't appear as they should! I Only can see an orange rectangle (which is the Grid in controltemplate , and orange is the ThemeManager.Instance.ThemePageColor property) , But there is no text inside the tooltip.
Thanks in advance.
Sorry was trying to do this from my phone in a hurry and threw it in the comment by mistake.
Anyway, just change <ControlTemplate> to <ControlTemplate TargetType="ToolTip"> so it knows what your ContentPresenter is even trying to talk to and you should be good.
Hope this helps, cheers!
P.S. - Mark answered questions as such so people know you got your issue resolved.
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>
I'm trying to style an element in WPF which displays a yellow border around anything thats in it and shows a tool-tip when the cursor is over it. The problem is that I don't have much of an idea how to do this and anything I tried does not seem to work.
Here is what I have until now:
<Style x:Key="HistoryElementStyle"
TargetType="{x:Type Control}">
<Setter Property="BorderBrush"
Value="Yellow"/>
<Setter Property="BorderThickness"
Value="1.5" />
<Setter Property="CornerRadius"
Value="2" />
<Setter Property="ToolTip">
<Setter.Value>
<ToolTip Template="{StaticResource HistoryTooltipTemplate}" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ContentPresenter x:Name="PART_Content"
Width="Auto"
HorizontalAlignment="Stretch"
ContentSource="Content"
IsEnabled="{TemplateBinding IsEnabled}" />
</Setter.Value>
</Setter>
</Style>
Visual Studio complains that the ContentPresenter is an invalid type.
Cheers
AC
You must wrap the ContentPresenter around a <ControlTemplate TargetType="Control" /> to match the type of the Control.Template property.
I'd try adding the DataTempalte tag around the ContentPresenter (sorry, I cannot test from where I am writing this).
I've run into a problem trying to implement a Menu and can't figure out what is going on. I'm trying to make a single-layer menu using the Menu control. Here is my menu code:
<Menu DockPanel.Dock="Top" Height="22" Name="menu1" VerticalAlignment="Top" Background="#FF325170">
<MenuItem Header="Featured" Style="{StaticResource menuItemStyle}" />
<MenuItem Header="Search" Style="{StaticResource menuItemStyle}" />
</Menu>
And my style for my MenuItems is as follows:
<Style x:Key="menuItemStyle" TargetType="{x:Type MenuItem}">
<Style.Triggers>
<Trigger Property="MenuItem.IsMouseOver" Value="true">
<Setter Property = "Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
When I mouseover the menu items, there is a Border that appears, and I can't figure out for the life of me how to remove this border. Any suggestions?
For a lot of the built-in WPF control styles, you need to override the ControlTemplate.
Here is the MSDN page that provides the Menu ControlTemplate, with instructions on how to use it -- basically you are inserting local copies of all the styles for the Menu control, which then override the default control look and feel.
To address your problem you should be able to just insert this style:
<Style x:Key="{x:Type Menu}" TargetType="{x:Type Menu}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Menu}">
<!--Here is where you change the border thickness to zero on the menu-->
<Border BorderThickness="0">
<StackPanel ClipToBounds="True" Orientation="Horizontal"
IsItemsHost="True"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>