I have created the following user control. When I add it to a xaml window, I get the error "Cannot create an instance of "ucAppItem". I dragged the user control onto the window from the toolbar.
XAML of user control is as follows:
<UserControl x:Class="Demos.ucAppItem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Width="852" Height="215">
<Grid>
<Label Name="lblTitle" Content="Title" HorizontalAlignment="Left" Margin="233,10,0,0" VerticalAlignment="Top" FontSize="22" FontFamily="Arial"/>
<Image Width="40" Height="40" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,80,0">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="pack://siteoforigin:,,,/arrow2.png"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="pack://siteoforigin:,,,/arrow1.png"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<Label x:Name="lblRun" Content="Run" HorizontalAlignment="Right" Margin="0,88,35,0" VerticalAlignment="Top" Foreground="#FF2EAADC" FontSize="20">
<Label.Style>
<Style TargetType="{x:Type Label}">
<Setter Property="Foreground" Value="#FF2EAADC"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#006d9e"/>
</Trigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
</Grid>
</UserControl>
XAML of window is as follows:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Demos" x:Class="Demos.Window1"
Title="Window1" Height="487" Width="854">
<Grid>
<local:ucAppItem/>
</Grid>
</Window>
Thanks for your help in advance!
#Anatoily Nikolaev - thanks for your help! Your pointer on the label fixed the issue I had with it and you were right about the image. I'll mark your response as the answer. It was the source that was the issue.
My label is now defined as:
<Label x:Name="lblRun" Content="Run" HorizontalAlignment="Right" Margin="0,88,35,0" VerticalAlignment="Top" FontSize="20">
<Label.Style>
<Style TargetType="{x:Type Label}">
<Setter Property="Foreground" Value="#FF2EAADC"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#006d9e"/>
</Trigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
My image is now defined as:
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="{StaticResource arrow2}"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Width" Value="40"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="0,0,80,0"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="{StaticResource arrow1}"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
And I have resources (set in the App.xaml file), set as this:
<Application x:Class="demos.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<BitmapImage x:Key="arrow1" UriSource="arrow1.png" />
<BitmapImage x:Key="arrow2" UriSource="arrow2.png" />
</Application.Resources>
</Application>
First, instead of pack://siteoforigin:,,,/arrow2.png need to write your actual URI and to make sure that the file exists in the project as a resource, like this (MSDN):
pack://application:,,,/arrow1.png
Secondly, trigger style for the label lblRun, will not work because you set this Foreground value locally, in WPF have a list of value precedence (MSDN), that the local value of a higher priority than the trigger style:
<Label x:Name="lblRun" Foreground="#FF2EAADC" FontSize="20" ... />
Try to remove it Foreground local value and use Style setter:
<Label x:Name="lblRun" Content="Run" HorizontalAlignment="Right" Margin="0,88,35,0" VerticalAlignment="Top" FontSize="20">
<Label.Style>
<Style TargetType="{x:Type Label}">
<Setter Property="Foreground" Value="#FF2EAADC"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#006d9e"/>
</Trigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
Related
The code below is a snippet from a programme. The button that is pressed is now set to red.
private void Disk_click(object sender, RoutedEventArgs e)
{
((Button)sender).Background = Brushes.Red;
((Button)sender).Foreground = Brushes.Red;
// here is the button colored red
((Button)sender).IsEnabled = false;
// here is the button again grey
}
The intention is that when a button is pressed, the colour will change and then the button will be disabeld. The colour must be preserved on the button. The colours that can occur are: red, blue, green and yellow.
But if I disable the button, the colour is not retained. The colour must be adjustable from this c# code.
Does anyone know how I can solve this? Or what I am doing wrong?
All help is highly appreciated!
It would be more accurate to edit the button design on the xaml side instead of the code behind.
You can use the Style property for this.
In case IsHitTestVisible is false, you can set the controls you want according to your taste when it is true.
<Button Name="Button1" Width="100"
Height="20"
Content="Click"
Click="Disk_click">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsHitTestVisible" Value="False">
<Setter Property="Background" Value="Red" />
</Trigger>
<Trigger Property="IsHitTestVisible" Value="True">
<Setter Property="Background" Value="Green" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
The button colour is being overridden by the Disabled style which is set in the Xaml.
In the Xaml code of the button, you can set the disabled Background & Foreground colour which will allow it to persist.
Have you considered using a Controltemplate with Triggers?
Usually requierments like yours are achieved using Templates and Styles.
A Controltemplate might look something like this:
<ControlTemplate x:Key="ButtonControlTemplate" TargetType="{x:Type Button}">
<Border x:Name="border" Height="Auto" Width="65" BorderThickness="0" Background="Transparent">
<StackPanel x:Name="Control" Margin="5,0,5,0" Orientation="Horizontal" MinHeight="25" VerticalAlignment="Center">
<TextBlock VerticalAlignment="Center" x:Name="Icon" FontSize="16" Foreground="Red"></TextBlock>
<ContentPresenter x:Name="contentPresenter" Margin="5,0,0,0" VerticalAlignment="Center"></ContentPresenter>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="Background" Value="#FFF4F4F4" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
<Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
<Setter Property="Foreground" Value="#FF838383"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsEnabled" Value="True"/>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter TargetName="border" Property="Background" Value="#FFF4F4F4" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
If it must be done with C# code you could try something like this:
if(myButton.IsEnabled == true)
{
//do logic here
// Button Red
} else
{
//do logic here
//Button Gray
}
Hope i could help.
Following button style would be helpful;
<Window
x:Class="TestApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="MainWindow"
Width="800"
Height="450"
mc:Ignorable="d">
<Window.Resources>
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Background" Value="LightGray" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter
x:Name="MyContentPresenter"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Button
Width="75"
Height="35"
Margin="5"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Click="Button_Click"
Content="Button"
Style="{StaticResource MyButtonStyle}" />
</Grid>
On Click;
private void Button_Click(object sender, RoutedEventArgs e)
{
((Button)sender).IsEnabled = false;
}
Result;
Please run following code and put mouse cursor on TextBlock in order to see what following code is doing.
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<TextBlock Foreground="Blue" Text="www.google.com" Height="20" Width="100">
<TextBlock.Style>
<Style>
<Style.Triggers>
<Trigger Property="TextBlock.IsMouseOver" Value="True">
<Setter Property="TextBlock.Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
</Window>
Then replace above code from
<Setter Property="TextBlock.Background" Value="Red"/>
to
<Setter Property="TextBlock.Foreground" Value="Red"/>
and see that Foreground is not working.
Do you have a solution which makes Foreground works like Background?
The reason it is not working is that you set Foreground="Blue" explicitly on your TextBlock. This will override any value from style triggers. Change your XAML like this:
<TextBlock Text="www.google.com" Height="20" Width="100">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Blue"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
i have 8 Custom Radiobuttons Styled as shown bellow
<Style x:Key="RadioSubMenuTbox" TargetType="{x:Type RadioButton}">
<Setter Property="Foreground" Value="#FFFFFF"/>
<Setter Property="Height" Value="35"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="FontFamily" Value="{StaticResource fontIbtisam}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border Name="brdMenu" CornerRadius="0" Background="#20000000" BorderBrush="White" BorderThickness="0" Padding="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="RadioContentPresenter" Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center">
<ContentPresenter.Resources>
<Style TargetType="TextBlock">
<Setter Property="TextAlignment" Value="Center" />
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
<TextBox Name="txtM" Visibility="Collapsed" Margin="0,5,4,5" Style="{StaticResource txtboxDefaultNoShadow}" Grid.Column="1" Width="100"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="txtM" Property="Visibility" Value="Visible" />
<Setter TargetName="brdMenu" Property="Background" Value="#F2826A" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="brdMenu" Property="BorderBrush" Value="#F2826A"/>
<Setter TargetName="brdMenu" Property="TextElement.Foreground" Value="White"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When a RadioButton IsChecked a textbox within the RadioButton is made visible, now the style is in a ResourceDictionary file, and i want to handle the TextChanged Event of each Textbox.
I can access the TextBox as follow
TextBox aTBox = (TextBox)MyRButton.Template.FindName("txtM", MyContentControl);
But how to handle the TextChanged Event ?
A ResourceDictionary can have code behind just like Windows, you could add an event handler and call the textchanged from there, for example :
Add a new Class in visual studio in the same folder of your ResourceDictionary
Add the x:Class attribute to the XAML file
<ResourceDictionary x:Class="YourNameSpace.YourClass"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
Now add the Event handler to your TextBox txtM
For more details you can check Fredrik Hedblad's Answer
I am trying to get this answer to work, however I get the error The property "Style" can only be set once.. Why is that?
This is what I have:
<UserControl x:Class="SFVControls.Controls.Basic.BooleanRectangleView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="20" d:DesignWidth="40">
<StackPanel Name="stackTextPanel" Orientation="Horizontal">
<StackPanel.Style>
<Setter Property="Margin" Value="0,8,0,0" />
<Style TargetType="{x:Type StackPanel}">
<Style.Triggers>
<DataTrigger Binding="{Binding QuickDrawBarPinned}" Value="False">
<Setter Property="Margin" Value="0,8,0,0" />
</DataTrigger>
<DataTrigger Binding="{Binding QuickDrawBarPinned}" Value="True">
<Setter Property="Margin" Value="0,48,0,0" />
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
</StackPanel>
</UserControl>
You've got two direct children of <StackPanel.Style>: A Setter for Margin that belongs within the Style, and the Style itself. You can only assign one thing to <StackPanel.Style>, and that thing has to be a Style.
So just move the Margin setter inside the Style element:
<StackPanel Name="stackTextPanel" Orientation="Horizontal">
<StackPanel.Style>
<Style TargetType="{x:Type StackPanel}">
<!-- Gotta be inside the Style, not outside. -->
<Setter Property="Margin" Value="0,8,0,0" />
<Style.Triggers>
<DataTrigger Binding="{Binding QuickDrawBarPinned}" Value="False">
<Setter Property="Margin" Value="0,8,0,0" />
</DataTrigger>
<DataTrigger Binding="{Binding QuickDrawBarPinned}" Value="True">
<Setter Property="Margin" Value="0,48,0,0" />
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
</StackPanel>
In short, your style has a fashion faux pas.
The question says it all. I cannot figure this out. I have tried to add a mirror text element, but I have a trigger that changes the fontsize when the mouse is over the element, which is not triggered due to the main element sitting on top. The usual workarounds for blurring do not work when it is the text itself that you want to dropshadow.
I am thinking of hacking this and adding two shadow textblocks that toggle visibility. But, I am not sure how to toggle that visibility as I can't use TargetName or a DataTrigger since it bases off the other element so, it will never trigger.
Per Request (Shadow is exaggerated so it can be seen):
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:models="clr-namespace:DesktopDictation.Spelling.Models">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../FontStyles/TextBlock.DefaultFont.xaml"/>
</ResourceDictionary.MergedDictionaries>
<DropShadowEffect x:Key="BlackShadow" ShadowDepth="10" Direction="270" Color="Black" Opacity="75" BlurRadius="2"/>
<Style x:Key="Spelling.TextGlyph" TargetType="TextBlock" BasedOn="{StaticResource TextBlock.DefaultFontFamilyStyle}">
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="Foreground" Value="#FFFFFF"/>
<!--<Setter Property="Effect" Value="{StaticResource BlackShadow}"/>-->
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#75BAFF"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="FontSize" Value="22"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="GlyphList" TargetType="ItemsControl">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate DataType="models:SpellingGlyph">
<Grid Name="MainGrid">
<TextBlock Text="{Binding Text}" VerticalAlignment="Bottom" Effect="{StaticResource BlackShadow}" Margin="0,0,5,0"/>
<TextBlock Text="{Binding Text}" ToolTip="{Binding Pronunciations}" Style="{StaticResource Spelling.TextGlyph}" VerticalAlignment="Bottom" Margin="0,0,5,0"/>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
I figured it out! I had to use a Label so that I could use a ControlTemplate, which then allows me to use DataTrigger and TargetName
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:models="clr-namespace:DesktopDictation.Spelling.Models">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../FontStyles/TextBlock.DefaultFont.xaml"/>
</ResourceDictionary.MergedDictionaries>
<DropShadowEffect x:Key="BlackShadow" ShadowDepth="2" Direction="270" Color="Black" Opacity="75" BlurRadius="2"/>
<Style x:Key="Spelling.TextGlyph" TargetType="TextBlock" BasedOn="{StaticResource TextBlock.DefaultFontFamilyStyle}">
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="Foreground" Value="#FFFFFF"/>
</Style>
<Style x:Key="GlyphList" TargetType="ItemsControl">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate DataType="models:SpellingGlyph">
<Label x:Name="MainSmall" VerticalAlignment="Bottom">
<Label.Template>
<ControlTemplate>
<Grid>
<TextBlock Name="Shadow" Text="{Binding Text}" VerticalAlignment="Bottom" Style="{StaticResource Spelling.TextGlyph}" Effect="{StaticResource BlackShadow}" Margin="0,0,5,0"/>
<TextBlock Name="MainText" Text="{Binding Text}" ToolTip="{Binding Pronunciations}" Style="{StaticResource Spelling.TextGlyph}" VerticalAlignment="Bottom" Margin="0,0,5,0"/>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName=MainText, Path=IsMouseOver}" Value="True">
<Setter TargetName="MainText" Property="Foreground" Value="#75BAFF"/>
<Setter TargetName="MainText" Property="FontWeight" Value="SemiBold"/>
<Setter TargetName="MainText" Property="FontSize" Value="22"/>
<Setter TargetName="Shadow" Property="Foreground" Value="#75BAFF"/>
<Setter TargetName="Shadow" Property="FontWeight" Value="SemiBold"/>
<Setter TargetName="Shadow" Property="FontSize" Value="22"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Label.Template>
</Label>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>