I have a customListView, in that I have created an image button with transparent background. But instead of being shown in all rows, It's only there in the last row
Button Style:
<Style TargetType="Button" x:Key="editButtonStyle" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
<Setter Property="Width" Value="20" />
<Setter Property="Height" Value="20" />
<Setter Property="Content">
<Setter.Value>
<Image Source="edit_icon.png" />
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
</Style>
The Call:
<DataTemplate>
<Button Style="{StaticResource editButtonStyle}">
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter Content="{TemplateBinding Content}"/>
</ControlTemplate>
</Button.Template>
</Button>
</DataTemplate>
Set x:Shared="False" on your editButtonStyle. You define an instance of Image in your style which of course can only be used once if it's a shared style (some kind of WPF optimization).
This would work in a DataTemplate since the FrameworkElementFactory would create a new Image for every item, but it doesn't work with styles.
Related
I added a custom style on Mouse Over effect for the button in Resource Dictionary inside the App.xaml file. While on my computer, it is working perfectly but on some PC the button's background is flickering or disappearing on mouseover.
App.xaml Code
<ResourceDictionary>
<Style x:Key="btn-danger" TargetType="{x:Type Button}">
<Setter Property="Background" Value="#d84315" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" Cursor="Hand">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#d9534f" />
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
How is it being used
<Button Style="{StaticResource btn-danger}" Margin="5" Click="Ok_Button_Click" Height="29" Width="100" Content="{Binding Path=Ok, Source={StaticResource Resources}}"/>
It is necessary to put the trigger under the template property, to border background be changed properly. Try to change the style definition as below:
<ResourceDictionary>
<Style x:Key="btn-danger" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Gray" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" Cursor="Hand">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#d9534f" />
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
I have a wpf ComboboxItem template that works fine.
I ONLY want it applied to specific comboboxes by way of a specific Combobox style. I don't know where in the combobox style that I should point it to the combobox item style. Any suggestions
<Style TargetType="ComboBoxItem">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Border Name="Border" Padding="2" SnapsToDevicePixels="true" BorderThickness="1">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
...
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="s" TargetType="ComboBoxItem">
...
</Style>
<ComboBox x:Name="comboBoxWithoutItemStyle"/>
<ComboBox x:Name="comboBoxWithItemStyle" ItemContainerStyle="{StaticResource s}"/>
Update based on comment: or, as part of a style:
<Style x:Key="s2" TargetType="ComboBox">
<Setter Property="ItemTemplate" Value="{StaticResource s}"/>
</Style>
I'm attempting to style the ListBoxItems within my listbox but the content of the ListBoxItem does not display and any change in colours are not apparent. The only thing working is the "border bottom" that I've applied to the bottom of each list item.
<Style x:Key="ListItemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="#FF66AFDE" BorderThickness="0 0 0 1" />
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="Red"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Use a panel/container/decorator in the ListBoxItem control template to set the background color. (It seems that the logic for setting the selection background color will interfere with attempts to control its background color.)
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border
Name="PART_Border"
Focusable="true"
Background="{TemplateBinding Background}"
BorderBrush="#FF66AFDE"
BorderThickness="0 0 0 1"
>
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter
Property="Background"
Value="Red"
TargetName="PART_Border"
/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Also note, that Border.Focusable is by default false. If setting it to true doesn't work (i admit, i haven't tested), use a different container control instead of Border.
Also, if the content you will show has any controls receiving focus (such as buttons or text fields), the trigger might not work as expected, because the Border might not have the focus when a control of the content has the focus. Also, tabbing from control to control might exhibit unexpected behaviour. If you have to deal with such a situation, try to handle the trigger in an ItemTemplate instead.
Regarding the ContentPresenter not showing anything: Depending on the type of the elements in the ItemsSource, you might need to define a ListBox.ItemTemplate (or ListBox.ItemTemplateSelector), otherwise ContentPresenter might not know what to display.
Try this
<Style x:Key="ListItemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border BorderBrush="#FF66AFDE" BorderThickness="0 0 0 1" x:Name="border">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="border" Property="Background" Value="Red"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I hope this will help
I've found this topic about setting the border of a button to transparent.
This works fine, but I want to use this for the button background and not the border.
Solution in link which I've put in <Window.Resources>...</Window.Resources>:
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Green"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
Source: How do you change Background for a Button MouseOver in WPF?
How can edit this code so I can use this to set the background of my button to transparent and not the border of it?
Try this snippet for a transparent button:
<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" BorderThickness="0">
<-- PUT BUTTON CONTENT HERE e.g. a Image -->
</Button>
Found the solution for my issue:
Apparently you have to add the triggers within the ControlTemplate under ControlTemplate.Trigger. Andd after you've done that the thing with borders is that you have to set a TargetName in the Border tag and then set the reference (-> TargetName="XXXXX") to the properties which you've named in the border tag.
So:
<Window.Resources>
<Style x:Key="MenuButton" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Height" Value="40" />
<Setter Property="Width" Value="Auto" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="45,0,0,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border Name="MenuBorder" SnapsToDevicePixels="True" BorderBrush="Black" Background="{TemplateBinding Background}" BorderThickness="0,0,0,2" >
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsFocused" Value="True">
<Setter Property="Background" Value="Transparent"/>
<Setter TargetName="MenuBorder" Property="BorderBrush" Value="#FFED6A2B" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Change this line
<Setter Property="Background" Value="Red"/>
to
<Setter Property="Background" Value="Transparent"/>
Use this in C# code
Button btn = new Button() {BorderBrush=System.Windows.Media.Brushes.Transparent,
BorderThickness = new Thickness(0)};
or
yourBtn.BorderBrush=System.Windows.Media.Brushes.Transparent;
yourBtn.BorderThickness =new Thickness(0);
First of all, I would like to add customized text blocks to my GUI with the least possible overhead. For instance: <TextBlock style={StaticRessources myTextBlock}>Text</TextBlock>
For now I have the following border style:
<Style x:Key="greenBox" TargetType="Border">
<Setter Property="Background" Value="#00FF00"/>
<Setter Property="CornerRadius" Value="10"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Width" Value="100"/>
</Style>
And I apply it in the following way:
<Border Style="{StaticResource greenBox}">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Custom Text</TextBlock>
</Border>
My problem is, it needs 2 Tags and the properties set in the TextBlock will be redunant. I cannot figure out how to abstract both definitions into a single element.
that's where Label comes into play:
<Style TargetType="Label" x:Key="greenLabel">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Label">
<Border Style="{StaticResource greenBox}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Label Style="{StaticResource greenLabel}">Custom Text</Label>
(in accordance with your other question: if this is the only place you use that borderstyle you can of course include these directly in that border not using an extra style)
You would need to create a custom control as described here. Or you could create a UserControl as well.