Binding WPF User Control - c#

I am developing an application with MVVm in wpf.
Here I have to place a user control to another user control.
Main user control will have have the UI elements to save the information. in addtion , I need to place a user control where I have a list view. I need to populate the data to the list view.
XAML is as follows
<UserControl x:Class="SMTF.TestCaseView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SMTF" mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
d:DesignHeight="550" d:DesignWidth="508">
<UserControl.Resources>
<Style x:Key="SMToggle" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}" >
<Border CornerRadius="3" Background="{TemplateBinding Background}">
<ContentPresenter Margin="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="Show View"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF3F3F3" Offset="1"/>
<GradientStop Color="#FFF3F3F3" Offset="0.307"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Content" Value="Add New"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF3F3F3" Offset="1"/>
<GradientStop Color="#FFF3F3F3" Offset="0.307"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid Height="550" Width="508">
<Button Content="Save" Command="{Binding SaveData}" Height="23" HorizontalAlignment="Left" Margin="299,507,0,0" Name="btnSave" VerticalAlignment="Top" Width="75" />
<Button Content="Reset" Command="{Binding ClearData}" Height="23" HorizontalAlignment="Right" Margin="0,507,47,0" Name="btnReset" VerticalAlignment="Top" Width="75" />
<Label Content="Category" Height="28" HorizontalAlignment="Left" Margin="13,27,0,0" Name="lblCategory" VerticalAlignment="Top" />
<ComboBox DisplayMemberPath="Category_Desc" Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" Width="343" Margin="118,27,0,0" Name="cboCategory"
ItemsSource="{Binding Path=Category}"
SelectedValue="{Binding Path=Category_Id}"
SelectedValuePath="Category_Id"
Text="{Binding Category_Desc}" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding CategorySelected}"
CommandParameter="{Binding SelectedValue, ElementName=cboCategory}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ComboBox>
<Label Content="Sub Category" Height="28" HorizontalAlignment="Left" Margin="13,65,0,0" Name="lblSubCategory" VerticalAlignment="Top" />
<ComboBox DisplayMemberPath="Sub_Category_Desc" Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" Width="343" Margin="118,65,0,0" Name="cboSubCategory"
ItemsSource="{Binding Path=SubCategory}"
SelectedValue="{Binding Path=Sub_Category_Id}"
SelectedValuePath="Sub_Category_Id"
Text="{Binding Sub_Category_Desc}" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding SubCategorySelected}"
CommandParameter="{Binding SelectedValue, ElementName=cboSubCategory}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ComboBox>
<Label Content="Scenario" Height="28" HorizontalAlignment="Left" Margin="13,101,0,0" Name="lblScenario" VerticalAlignment="Top" />
<ComboBox Height="23" HorizontalAlignment="Left" Margin="118,101,0,0" Name="cboScenario" VerticalAlignment="Top" Width="343"
ItemsSource="{Binding Path=Scenario}"
DisplayMemberPath="Scenario_Desc"
SelectedValuePath="Scenario_Id"
SelectedValue="{Binding Path=Scenario_Id}"
Text="{Binding Scenario_Desc}"
/>
<TextBox Height="118" HorizontalAlignment="Left" Margin="118,139,0,0" Name="txtCulture" Text="{Binding Test_Desc}" VerticalAlignment="Top" Width="340" />
<Label Content="Test Description" Height="28" HorizontalAlignment="Left" Margin="13,137,0,0" Name="lblCulture" VerticalAlignment="Top" />
<Label Content="Applicable to" Height="28" HorizontalAlignment="Left" Margin="13,280,0,0" Name="lblVersion" VerticalAlignment="Top" />
<ComboBox Height="23" HorizontalAlignment="Left" Margin="118,285,0,0" Name="Version" VerticalAlignment="Top" Width="343"
ItemsSource="{Binding Path=Version}"
DisplayMemberPath="Version_Desc"
SelectedValuePath="Version_Id"
SelectedValue="{Binding Path=Version_Id}"
Text="{Binding Version_Desc}"
/>
<CheckBox Content="Activate" Height="16" HorizontalAlignment="Left" IsChecked="{Binding Active}" Margin="402,263,0,0" Name="chkActive" VerticalAlignment="Top" />
<local:TestScriptListView HorizontalAlignment="Left" Margin="118,349,0,0" x:Name="scriptList" VerticalAlignment="Top" Height="148" Width="343" DataContext="{Binding Path=Script}" />
<Label Content="Script" Height="28" HorizontalAlignment="Left" Margin="13,318,0,0" Name="lblScript" VerticalAlignment="Top" />
<TextBlock HorizontalAlignment="Left" Margin="118,118,0,0" Height="32">
<ToggleButton x:Name="VisibilityToggle" Focusable="False" Command ="{Binding ShowNew}" Style="{StaticResource SMToggle}" >
<Image Source="/Image/Add.png" Width="16" Height="16" />
</ToggleButton>
</TextBlock>
</Grid>
</UserControl>
How to solve this?
thanks
NS

Add reference your Listview's Usercontrol in entry usercontrol and set Datacontext .
like-
< StackPanel>
< views:ExceptionStrip DataContext="{Binding ExceptionViewModel}"/>
< /StackPanel>

Related

Why control template triggers does not affect my buttons in documentviewer?

I wrote a documentviewer style (below) and I came into a problem with first two buttons - both of them, when disabled has lightgray-ish colour of background and gray foreground. How do I make them transparent when disabled? I tried to put transparency everywhere possible with no success. Those triggers at the bottom does not work. Thanks in advance.
<Style x:Key="{x:Type DocumentViewer}"
TargetType="{x:Type DocumentViewer}">
<Setter Property="Foreground"
Value="Transparent" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="FocusVisualStyle"
Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DocumentViewer}">
<Border BorderThickness="0.4"
BorderBrush="White"
Focusable="False">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.Background>
<SolidColorBrush Color="Transparent" />
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ToolBar ToolBarTray.IsLocked="True" Height="50" Background="Transparent" Foreground="Transparent"
KeyboardNavigation.TabNavigation="Continue" BorderThickness="0.8" BorderBrush="White">
<StackPanel Orientation="Horizontal">
<Button Command="ApplicationCommands.Print" BorderThickness="0" Background="Transparent"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource Buttondefault}"
Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Printer" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Print" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Button Command="ApplicationCommands.Copy" BorderThickness="0" Background="Transparent"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="ContentCopy" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Copy" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Separator/>
<Button Command="NavigationCommands.IncreaseZoom" BorderThickness="0" Background="Transparent" Foreground="WhiteSmoke"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="ZoomIn" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Zoom In" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Button Command="NavigationCommands.DecreaseZoom" BorderThickness="0" Background="Transparent" Foreground="WhiteSmoke"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="ZoomOut" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Zoom Out" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Separator />
<Button Command="NavigationCommands.Zoom" BorderThickness="0" Background="Transparent" Foreground="WhiteSmoke"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
CommandParameter="100.0"
Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="PageLayoutFooter" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Actual Size" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Button Command="DocumentViewer.FitToWidthCommand" BorderThickness="0" Background="Transparent" Foreground="WhiteSmoke"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="FitToPageOutline" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Fit To Width" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Button Command="DocumentViewer.FitToMaxPagesAcrossCommand" BorderThickness="0" Background="Transparent" Foreground="WhiteSmoke"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
CommandParameter="1" Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="PageLayoutMarginals" Height="20" Width="20" Margin="0,5,0,0"/>
<TextBlock Text="Whole Page" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
<Button Command="DocumentViewer.FitToMaxPagesAcrossCommand" BorderThickness="0" Background="Transparent" Foreground="WhiteSmoke"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
CommandParameter="2" Margin="5,0,5,0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="TableSplitCell" Height="20" Width="20" Margin="0,5,0,0" RenderTransformOrigin="5,5"/>
<TextBlock Text="Two Pages" Margin="5,0,0,0" FontSize="20"/>
</StackPanel>
</Button>
</StackPanel>
</ToolBar>
<ScrollViewer Grid.Row="1"
CanContentScroll="true"
HorizontalScrollBarVisibility="Auto"
x:Name="PART_ContentHost"
IsTabStop="true">
<ScrollViewer.Background>
<SolidColorBrush Color="Transparent"/>
</ScrollViewer.Background>
</ScrollViewer>
<ContentControl Grid.Row="2"
x:Name="PART_FindToolBarHost"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter Property="Background" Value="#623ed0"/>
<Setter Property="Foreground" Value="WhiteSmoke"/>
</Trigger>
<Trigger Property="Button.IsEnabled" Value="False">
<Setter Property="Foreground" Value="Gray"/>
<Setter Property="Background" Value="Transparent"/>
</Trigger>
<Trigger Property="Button.IsEnabled" Value="True">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

C# WPF Button Style Template Not Showing Background Image

I am putting together a very simple WPF Window to demonstrate how the style the end user has asked for looks. As there are a number of repeated button type objects I wanted to make them have a style in the window that can then be transferred to the real application once adjustments have been made.
The problem I face is that the user wishes to have images for their buttons, when I set the background image within the button itself then it shows perfectly and behaves as I want (change of image on mouseover etc). When I move that formatting into the Style everything till works but the background images don't show. I am sure I am missing something very simple but I cannot see it.
The code I have generated is below :-
<Window x:Class="SkinningDemo.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"
xmlns:local="clr-namespace:SkinnigDemo"
mc:Ignorable="d"
Title="DemoWindow" Height="450" Width="800">
<Window.Resources>
<Style x:Key="MainButtonStyle" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/Images/Button1.png" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="0">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/Images/Button1.png"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#FF266C38"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/Images/Button2.png"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#220A88"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="Home">
<Grid.Background>
<SolidColorBrush Color="#FF220A88" Opacity="0.15"/>
</Grid.Background>
<Image HorizontalAlignment="Left" Height="68" Margin="10,10,0,0" VerticalAlignment="Top" Width="737" Source="images/Master Logo transparent.png"/>
<TextBlock HorizontalAlignment="Left" Height="62" TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top" Width="750" Margin="36,96,0,0" Foreground="#FF266C38" FontSize="14" FontWeight="Bold"><Run Language="en-gb" Text="Sample Welcome Text will be placed here once agreed..."/></TextBlock>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="36,0,0,0" Stroke="#220A88" VerticalAlignment="Center" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="427,0,0,0" Stroke="#220A88" VerticalAlignment="Center" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="36,295,0,0" Stroke="#220A88" VerticalAlignment="Top" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="427,295,0,0" Stroke="#220A88" VerticalAlignment="Top" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="54,163,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="First functional text will go here..."/></TextBlock>
<Button x:Name="Button1" Style="{StaticResource MainButtonStyle}" Content="View Function 1" HorizontalAlignment="Left" Height="50" Margin="82,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18">
</Button>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="446,163,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Second Functional Text will go here..."/></TextBlock>
<Button x:Name="Button2" Style="{StaticResource MainButtonStyle}" Content="View Function 2" HorizontalAlignment="Left" Height="50" Margin="472,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="56,294,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Third Functional Text will go here"/></TextBlock>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="446,295,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Fourth functional text will go here..."/></TextBlock>
<Button x:Name="Button3" Style="{StaticResource MainButtonStyle}" Content="View Function 3" HorizontalAlignment="Left" Height="50" Margin="472,343,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>
<Button x:Name="Button4" Style="{StaticResource MainButtonStyle}" Content="View Function 4" HorizontalAlignment="Left" Height="50" Margin="80,343,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>
</Grid>
</Window>
As I say the background images do not display on the screen, but if I remove the style and set it all locally with exactly the same values it works perfectly :-
<Button x:Name="Button1" Content="View Function 1" HorizontalAlignment="Left" Height="50" Margin="82,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18">
<Button.Background>
<ImageBrush ImageSource="/Images/Button1.png"/>
</Button.Background>
</Button>
Thanks in anticipation of the help.
Playing around with your nicely looking XAML I noticed that you need to say "bind" the Background brush to the root element of your control template which is a border, to get background images displayed.
If you just insert Background="{TemplateBinding Background}" under the line <Border Name="border" it'll basically work out fine., like:
<Border Name="border"
Background="{TemplateBinding Background}"
BorderThickness="0">

Blurry Adorner WPF Xaml

I cannot for the life of me figure this out, using the same control template I get a blurry Adorner on one Element in my panel:
Control Template:
<ControlTemplate x:Key="validationErrorTemplateBubble" >
<DockPanel >
<Grid DockPanel.Dock="Bottom" Margin="10,0,0,0" >
<Grid.Effect>
<DropShadowEffect ShadowDepth="2" Direction="315" />
</Grid.Effect>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Grid.Row="1" BorderBrush="Gray" BorderThickness="1" CornerRadius="5" Margin="0,-1.6,0,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE7E8F1" Offset="1"/>
<GradientStop Color="White"/>
<GradientStop Color="#FFF3F4F6" Offset="0.472"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<WrapPanel VerticalAlignment="Center" Margin="5,5,10,5">
<Image Source="/Sesam;component/Modules/Images/wrongsmall.png" Height="15" Width="15" />
<TextBlock Foreground="Red" FontSize="12" Margin="5,0,0,0" Text="{Binding ElementName=ErrorAdorner, Path=AdornedElement.(Validation.Errors).CurrentItem.ErrorContent}" />
</WrapPanel>
<ContentPresenter Margin="5" Grid.Column="1" Grid.Row="1"/>
</Grid>
</Border>
<Path Data="M306.375,133.125L306.375,100.875L335.75,133.25" Stroke="Gray" Height="15" Fill="White" StrokeThickness="1" Stretch="Uniform" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Grid>
<AdornedElementPlaceholder x:Name="ErrorAdorner" />
</DockPanel>
Non-Blury Text Box Code:
<TextBox BorderThickness="0" VerticalAlignment="Center" Width="150" Padding="3" Margin="8,0,0,0" Foreground="{StaticResource myDarkBlue}" Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}, Path=DataContext.encTypeValidation, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" Validation.ErrorTemplate="{StaticResource validationErrorTemplateBubble}" HorizontalAlignment="Left" >
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem}}, Path=IsSelected}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}, Path=DataContext.editClicked}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Visibility" Value="Visible" />
</MultiDataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
Blurry TextBox Code:
<Grid>
<WrapPanel>
<TextBox x:Name="tbox" Text="{Binding encTypeValidation, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" Foreground="{StaticResource myTextBoxColor}" Validation.ErrorTemplate="{StaticResource validationErrorTemplateBubble}" PreviewMouseDown="tbox_PreviewMouseDown" Width="200" >
<TextBox.InputBindings>
<MouseBinding Gesture="LeftClick" Command="{Binding addBoxClicked}" />
</TextBox.InputBindings>
</TextBox>
</WrapPanel>
</Grid>
Something about the way it renders, the first (non blury) is within a "ListViewItem" Control Template, the other is a userControl..
Any ideas?
FIXED
Fixed by adding UseLayoutRounding="True" to parent Control ie: ContentControl!
Thank you Aybe!
<Grid Grid.Row="2" Background="{StaticResource myLightGrey}" >
<Border BorderBrush="{StaticResource myLightGrey}" BorderThickness="0,1,1,0">
<ContentControl x:Name="AddPanel" VerticalAlignment="Center" HorizontalAlignment="Center" UseLayoutRounding="True"/>
</Border>
</Grid>
Adding UseLayoutRounding="True" to the parent container control solves the rendering issue.

The resource "XX" could not be resolved

I'm getting the following error when I run my program:
Warning The resource "bellRingersStyle" could not be resolved.
This comes up for the last two lines that are {StaticResource bellRingersStyle}.
<Window x:Class="BellRingers.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Middleshire Bell Ringers Association – Members" Height="350" Width="525">
<Window.Resources>
<Style x:Key="bellRingerStyle" TargetType="Control">
<Setter Property="Button.Background" Value="Gray"/>
<Setter Property="Button.Foreground" Value="Gray"/>
<Setter Property="Button.FontFamily" Value="Comic Sans MS"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Blue"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Button Style="{StaticResource bellRingerStyle}" Panel.ZIndex="1" Content="Button" Height="23" HorizontalAlignment="Left" Margin="400,131,0,0" Name="button1" VerticalAlignment="Top" Width="75" >
</Button>
<Button Style="{StaticResource bellRingersStyle}" Panel.ZIndex="1" Content="Button" Height="23" Margin="0,0,0,0" Name="button2" Width="75" />
<Image Panel.ZIndex="0" Margin="0,0,0,0" Name="image1" >
<Image.Source>
<BitmapImage UriSource="bell.gif" />
</Image.Source>
</Image>
<TextBox Style="{StaticResource bellRingersStyle}" Height="23" HorizontalAlignment="Left" Margin="206,271,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />
</Grid>
</Window>
You have a typo. You defined it as bellRingerStyle but reference bellRingersStyle.

Changing a button color on hover in xaml

I want to change a button's color on hover.
This is my xaml code.
<Window x:Class="OfflineIM.UI.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Vytru | Offline IM" Height="300" Width="550" ResizeMode="CanMinimize" WindowStartupLocation="CenterScreen" Icon="/OfflineIM.UI;component/Images/368x368.ico">
<Grid Name="MainGrid">
<Grid Name="HeaderGrid" VerticalAlignment="Top" HorizontalAlignment="Center" Width="550" Height="130">
<Image VerticalAlignment="Stretch" HorizontalAlignment="Right" Width="250" Margin="5,10,10,10" Source="Images\offlineIM-logo.png" />
</Grid>
<Grid Name="ContentGrid" VerticalAlignment="Bottom" HorizontalAlignment="Center" Height="160" Width="550">
<Grid Margin="20,10,20,80" Background="#5F68686A">
<TextBlock Margin="170,5,20,10" VerticalAlignment="Top" HorizontalAlignment="Left" Text="" Name="companyNameTextBlock" Foreground="#FF2B2D2E" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
<TextBlock Margin="5,5,20,10" VerticalAlignment="Top" HorizontalAlignment="Left" Text="Company Name:" Foreground="#FF2B2D2E" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
<TextBlock Margin="5,25,20,10" VerticalAlignment="Top" HorizontalAlignment="Left" Text="Number of Users:" Foreground="#FF2B2D2E" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
<TextBlock Margin="170,25,20,10" VerticalAlignment="Top" HorizontalAlignment="Left" Text="" Name="NumberOfUsersTextBlock" Foreground="#FF2B2D2E" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
<TextBlock Margin="5,45,20,10" VerticalAlignment="Top" HorizontalAlignment="Left" Text="Support and subscription:" Foreground="#FF2B2D2E" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
<TextBlock Margin="170,45,20,10" VerticalAlignment="Top" HorizontalAlignment="Left" Text="" Name="SupportAndSubscriptionTextBlock" Foreground="#FF2B2D2E" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
</Grid>
<Button Height="50" HorizontalAlignment="Right" Name="aboutButton" VerticalAlignment="Bottom" Width="50" BorderThickness="0" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Margin="0,0,20,15" Cursor="Hand" ToolTip="About" ClickMode="Release" Click="aboutButton_Click">
<Button.Background>
<ImageBrush ImageSource="/OfflineIM.UI;component/Images/About.png" />
</Button.Background>
</Button>
<Button Height="50" HorizontalAlignment="Right" Name="updateLicenseButton" VerticalAlignment="Bottom" Width="50" BorderThickness="0" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Margin="0,0,75,15" Cursor="Hand" ToolTip="Update License" ClickMode="Release" Click="updateLicenseButton_Click">
<Button.Background>
<ImageBrush ImageSource="/OfflineIM.UI;component/Images/UpdateLicense.png" />
</Button.Background>
</Button>
<Button Height="50" HorizontalAlignment="Left" Name="StartButton" VerticalAlignment="Bottom" Width="50" BorderThickness="0" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Margin="20,0,10,15" Cursor="Hand" ToolTip="Start Service" ClickMode="Release" Click="StartButton_Click">
<Button.Background>
<ImageBrush ImageSource="/OfflineIM.UI;component/Images/Start.png" />
</Button.Background>
</Button>
<Button Height="50" HorizontalAlignment="Left" Name="StopButton" VerticalAlignment="Bottom" Width="50" BorderThickness="0" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Margin="75,0,10,15" Cursor="Hand" ToolTip="Stop Service" ClickMode="Release" Click="StopButton_Click">
<Button.Background>
<ImageBrush ImageSource="/OfflineIM.UI;component/Images/Stop.png" />
</Button.Background>
</Button>
<TextBlock Margin="135,5,20,14" VerticalAlignment="Bottom" HorizontalAlignment="Left" Text="" Name="ErrorTextBlock" Foreground="#FF58595B" TextAlignment="Justify" FontSize="12" FontWeight="Normal" />
</Grid>
</Grid>
</Window>
You can try with this code
1 Style based on triggers
<Style x:Key="myStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="{StaticResource mouseOverColor}" />
</Trigger>
</ControlTemplate.Triggers>
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
2 Code with Ressource and Control
<Window x:Class="MouseOverTutorial.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<SolidColorBrush x:Key="mouseOverColor"
Color="Red" />
</Window.Resources>
<Grid>
<Button Content="Click"></Button>
</Grid>
</Window>

Categories