I am trying to apply some styles to a Datagrid, but I am getting an error.
I am trying to apply rounded corners to a DataGrid.
This is the error I am getting on , <Setter.Value>
The attachable property 'Value' was not found in type 'Setter'
<Style TargetType="{x:Type DataGrid}">
<Setter Property="RowHeaderWidth" Value="0" />
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGrid}">
<Grid>
<Border CornerRadius="5"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Style>
I found this question Datagrid template with rounded corners, but it does help with my question.
How do I get this to work?
Try this, you'll be Ok.
<Style TargetType="{x:Type DataGrid}">
<Setter Property="RowHeaderWidth" Value="0" />
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGrid}">
<Border Background="Red" CornerRadius="5">
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You actually didn't specify the name of the property for the Setter.Value. The
<Setter.Value></Setter.Value>
must be enclosed inside a
<Setter Property="NameOfthePropertyToSetTheValueFor"></Setter>
For the case of CornerRadius the property must be Template.
You forgot a
< Setter Property="Template">
2 lines above the ControlTemplate declaration
*remove space before 'Setter':)
The indents are sort of helping you in the issue.
<Style TargetType="{x:Type DataGrid}">
<Setter Property="RowHeaderWidth" Value="0" />
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ControlTemplate">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGrid}">
<Grid>
<Border CornerRadius="5"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I have created a ResourceDictionary style sheet that have a style named btn_default.
I plan to use it on all the buttons in my program. My problem is that when I hover the button then the background-color doesnt change. The font color changes.
button_default
button_default:hover
I tried in my code to change the "Setter Property="Background" Value="#b5b5b5"", however I guess that doesnt affect the Border-tag, but the Style-tag?
ResourceDictionary
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MSDNSample">
<!-- Btn default -->
<Style x:Key="btn_default" TargetType="{x:Type Button}">
<Setter Property="FontFamily" Value="Calibri"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Foreground" Value="#d9d9d9" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="5" BorderThickness="1" Padding="6,4,6,4" Background="#6c6c6c" BorderBrush="#393939">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#b5b5b5"/>
<Setter Property="Foreground" Value="#000000" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- //Btn default -->
</ResourceDictionary>
Main
<Button x:Name="buttonExplorer" Content="Explorer" Style="{StaticResource btn_default}" Margin="0,0,6,0" />
<Button x:Name="buttonProcess" Content="Process" Style="{StaticResource btn_default}" Margin="0,0,6,0" />
You should declare Background property of Border using TemplateBinding extension and set Background value in Style setter, otherwise it'll never be updated
<Style x:Key="btn_default" TargetType="{x:Type Button}">
<Setter Property="FontFamily" Value="Calibri"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Foreground" Value="#d9d9d9" />
<Setter Property="Background" Value="#6c6c6c"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="5" BorderThickness="1" Padding="6,4,6,4" BorderBrush="#393939" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#b5b5b5"/>
<Setter Property="Foreground" Value="#000000" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I'm building WPF application and I want to use icons from Font Awesome. I have Font Awesome included in styles, and a font family specified in fields where I want to use it. The problem is icons are showing properly in the design window but change to crossed squares during runtime.
There is my Fonts XAML
<FontFamily x:Key="ArconRegular">pack://application;,,,/Fonts/#Arcon</FontFamily>
<FontFamily x:Key="ArconRounded">pack://application;,,,/Fonts/#Arcon Rounded-</FontFamily>
<FontFamily x:Key="FASolid">pack://application;,,,/Fonts/#Font Awesome 5 Free Solid</FontFamily>
<Style TargetType="{x:Type Control}" x:Key="BaseStyle">
<Setter Property="FontFamily" Value="{StaticResource ArconRegular}"/>
</Style>
<Style TargetType="{x:Type TextBlock}" x:Key="BaseTextBlockStyle">
<Setter Property="FontFamily" Value="{StaticResource ArconRegular}"/>
</Style>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource BaseStyle}"/>
<Style TargetType="{x:Type Label}" BasedOn="{StaticResource BaseStyle}"/>
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource BaseStyle}"/>
<Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource BaseTextBlockStyle}"/>
<Style TargetType="{x:Type ListView}" BasedOn="{StaticResource BaseStyle}"/>
<system:String x:Key="FAMinimizeIcon"></system:String>
<system:String x:Key="FAMaximizeIcon"></system:String>
<system:String x:Key="FACloseIcon"></system:String>
The Buttons XAML (I want to use icons on buttons)
<Style TargetType="{x:Type Button}" x:Key="WindowControlButton" BasedOn="{StaticResource BaseStyle}">
<Setter Property="FontFamily" Value="{StaticResource FASolid}"/>
<Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="Foreground" Value="{StaticResource ForegroundMainBrush}"/>
<Setter Property="LayoutTransform">
<Setter.Value>
<ScaleTransform ScaleX="1.5"/>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource BackgroundLightBrush}"/>
</Trigger>
</Style.Triggers>
</Style>
And finally MainWindow XAML (a part of it where i want to use them)
<!-- Window Buttons -->
<StackPanel Grid.Column="2" Orientation="Horizontal">
<Button Style="{StaticResource WindowControlButton}" Content="{StaticResource FAMinimizeIcon}" Command="{Binding MinimizeCommand}"/>
<Button Style="{StaticResource WindowControlButton}" Content="" Command="{Binding MaximizeCommand}"/>
<Button Style="{StaticResource WindowCloseButton}" Content="" Command="{Binding CloseCommand}"/>
</StackPanel>
As you can see, I tried specifying icon code in separate string and using StaticResource but nothing works.
In my case it was missing FontFamily="{TemplateBinding FontFamily}" in the ControlTemplate
Had a same issue, i.e Showing ok in Design mode but no Runtime. For me it was because fontawesome was not included in the assembly.
Changed (in visual studio) the .otf file's Build Action to "Resource". You may want to check if the file is included in your assembly by decompiler.
I want to make a button style where a user hovers over the mouse it changes it's background to an image I set but when I use this style it also removes the text (content)
Here is the Styling I use
<Style TargetType="{x:Type Button}" x:Key="StartButton_Style">
<Setter Property="Background">
<!-- Background image (dark one)-->
<Setter.Value>
<ImageBrush ImageSource="C:\Users\yosi1\OneDrive\מסמכים\Visual Studio 2017\Projects\Classic Story Launcher\Resources\Start_Button_Nornal.png"/>
</Setter.Value>
</Setter>
<Setter Property="FontFamily" Value="Candara"/>
<Setter Property="FontSize" Value="40"/>
<Setter Property="Foreground" Value="#FFA48B60"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
<!-- Triggers an event when the user hovers the mouse over the button-->
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!-- Chagnes the background images to notify the user that his mouse is over the button -->
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="C:\Users\yosi1\OneDrive\מסמכים\Visual Studio 2017\Projects\Classic Story Launcher\Resources\Start_Button_Click.png"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
And here is the button element which uses the styling
<Button Grid.Column="2" Content="START" Margin="0,34,0,0" Style="{StaticResource StartButton_Style}"/>
Add a ContentPresenter to your template:
<Style TargetType="{x:Type Button}" x:Key="StartButton_Style">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="C:\Users\yosi1\OneDrive\מסמכים\Visual Studio 2017\Projects\Classic Story Launcher\Resources\Start_Button_Nornal.png"/>
</Setter.Value>
</Setter>
<Setter Property="FontFamily" Value="Candara"/>
<Setter Property="FontSize" Value="40"/>
<Setter Property="Foreground" Value="#FFA48B60"/>
<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">
<Setter.Value>
<ImageBrush ImageSource="C:\Users\yosi1\OneDrive\מסמכים\Visual Studio 2017\Projects\Classic Story Launcher\Resources\Start_Button_Click.png"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
I need to customize the Microsoft.Phone.Controls.Rating control. Below code creates a template a bit closer but i need to change icons.
<Style x:Key="RatingStyle" TargetType="toolkit:Rating">
<Setter Property="AllowHalfItemIncrement" Value="True" />
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="20" />
<Setter Property="FilledItemStyle">
<Setter.Value>
<Style TargetType="toolkit:RatingItem">
<Setter Property="Background"
Value="#FF9900" />
</Style>
</Setter.Value>
</Setter>
<Setter Property="UnfilledItemStyle">
<Setter.Value>
<Style TargetType="toolkit:RatingItem">
<Setter Property="Background"
Value="#E0E0E0" />
</Style>
</Setter.Value>
</Setter>
</Style>
My required templates are 2, 1 for place rating and one for average price level (shown by $ sign). below is the image showing my requirement.
I find the quickest method is to change the Template of the two styles to adjust the image/look:
<Style x:Name="UnfilledDollarStyle" TargetType="toolkit:RatingItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:RatingItem">
<Border HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock FontSize="30" Foreground="Silver">$</TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Name="FilledDollarStyle" TargetType="toolkit:RatingItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:RatingItem">
<Border HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock FontSize="30" Foreground="Green">$</TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In use:
<toolkit:Rating UnfilledItemStyle="{StaticResource UnfilledDollarStyle}"
FilledItemStyle="{StaticResource FilledDollarStyle}" Value="2" />
By editing the Template, you could use images or whatever you'd like within each RatingItem.
Of course, you could leave the unfilled style "empty" or completely transparent so that no symbols are shown at all. (To keep consistent spacing around the control, I'd suggest using a fully transparent symbol rather than no content). Here, I've set the Opacity to 0:
<TextBlock FontSize="30" Opacity="0">$</TextBlock>
I created a ressourceDictionnary for creating a templateButton.
I would like to be able to change the png image when i use this template, i think i need to use a ContentPresenter, but i don't know why.
Here is my RessourceDictionnary :
<ControlTemplate TargetType="{x:Type Button}" x:Key="BoutonRessources">
<Button Width="32" Margin="0,0,7,0" Name="tbrClear" ToolTip="Clear" VerticalAlignment="Center" BorderThickness="0" HorizontalAlignment="Center" Background="Transparent" HorizontalContentAlignment="Center">
<Border>
<Image Source="xRtDiva_XWPF_TBR_PREMIER.PNG_IMAGES.png" Height="18"/>
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Background" Value="Transparent" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="BoutonToolbarSelected.png"/>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="22"/>
<Setter Property="Width" Value="32"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</Button>
So, when i use this Button template, i would like to be able to pass them an other png image to display. For example i would like to replace xRtDiva_XWPF_TBR_PREMIER.PNG_IMAGES.png by MyPicture.png.
How doing this ? With a contentPresenter ?
Thanks :)