Develop Reference

Style trigger property is not changing element's width in XAML

i am trying to trigger IsMouseOverproperty of an element and chnging the width in XAML and it's working but the problem is if i define the default or static width property in element's tag then this doesn't work. Why ?
Working code
<UserControl x:Class="IntelliVentory.UserControls.SideMenuBarControl"
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"
xmlns:local="clr-namespace:IntelliVentory.UserControls"
mc:Ignorable="d"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:userControls="clr-namespace:IntelliVentory.UserControls"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
Background="{DynamicResource MaterialDesignPaper}"
TextElement.FontWeight="Medium"
TextElement.FontSize="14"
FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<ItemsControl Margin="50">
<ItemsControl.Resources>
<Style x:Key="ScaleStyle" TargetType="materialDesign:ColorZone">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" Value="300" />
</Trigger>
</Style.Triggers>
</Style>
</ItemsControl.Resources>
<materialDesign:ColorZone Name="ColorZone1" Style="{StaticResource ScaleStyle}" Height="50"
Mode="PrimaryDark" Padding="16" CornerRadius="3"
materialDesign:ShadowAssist.ShadowDepth="Depth3" />
<materialDesign:ColorZone Margin="0 5 0 0" Name="ColorZone2" Style="{StaticResource ScaleStyle}"
Height="50" Mode="PrimaryDark" Padding="16" CornerRadius="3"
materialDesign:ShadowAssist.ShadowDepth="Depth3" />
<materialDesign:ColorZone Margin="0 5 0 0" Name="ColorZone3" Style="{StaticResource ScaleStyle}"
Height="50" Mode="PrimaryDark" Padding="16" CornerRadius="3"
materialDesign:ShadowAssist.ShadowDepth="Depth3" />
</ItemsControl>
</Grid>
but if now i add width="40" property then this trigger property wont work on first ColorZone Element Name="colorZone1" it won't work .
<materialDesign:ColorZone Name="ColorZone1" Style="{StaticResource ScaleStyle}" width="40" Height="50"
Mode="PrimaryDark" Padding="16" CornerRadius="3"
materialDesign:ShadowAssist.ShadowDepth="Depth3" />

You need to set the default width in the style.
<Style x:Key="ScaleStyle" TargetType="materialDesign:ColorZone">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" Value="300" />
</Trigger>
</Style.Triggers>
<Style.Setters>
<Setter Property="Width" Value="40"/>
</Style.Setters>
</Style>

Button with round edge grid and set disable button color to green

I want to have a button with round edge grid and set disable button color to gray, green otherwise. Attached snippet of code. I don't know how to change the default. If I disable my button, I get the output as the image on the left, however, I want it to look like the image on the right!
<Button x:Name="button" Height="30" Width="100" Margin="825,0,0,0" Background="Transparent"
BorderThickness="0" BorderBrush="Transparent">
<Button.Content>
<Border CornerRadius="12.5" Height="25" Width="95" Margin="0" BorderBrush="Gray"
BorderThickness="4,4,4,4" Background="Gray">
<TextBlock Text="Back" HorizontalAlignment="Center" VerticalAlignment="Top"
Margin="12,0,13,0" Foreground="White"/>
</Border>
</Button.Content>
</Button>

Content is only one part of Button. The rest is determined by Template.
If multiple buttons should have custom apperance, the Template should be set in buttons Style. For one button it can be done inplace:
<Button x:Name="button" Content="Back" Height="30" Width="100" Margin="825,0,0,0" Background="Transparent"
BorderThickness="0" BorderBrush="Transparent">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border CornerRadius="12.5" Height="25" Width="95" Margin="0" BorderBrush="Gray"
BorderThickness="4,4,4,4" Background="Gray">
<TextBlock Text="{TemplateBinding Content}"
HorizontalAlignment="Center" VerticalAlignment="Top"
Margin="12,0,13,0" Foreground="White"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
if you are going to reuse the template, declare it as Resource
<Window.Resources>
<ControlTemplate TargetType="Button" x:Key="RoundBtn">
<Border Name="roundBorder" CornerRadius="12.5" Height="25" Width="95" Margin="0" BorderBrush="Gray"
BorderThickness="4,4,4,4" Background="Gray">
<TextBlock Text="{TemplateBinding Content}"
HorizontalAlignment="Center" VerticalAlignment="Top"
Margin="12,0,13,0" Foreground="White"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="roundBorder" Property="Background" Value="Green"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
and set button Template using resource:
<Button x:Name="button" Content="Back" Height="30" Width="100"
Template="{StaticResource RoundBtn}"
Margin="825,0,0,0" Background="Transparent"
BorderThickness="0" BorderBrush="Transparent"/>

This should work for you. I've used an outer grid with a blue background so that I could be sure it was all working, but just remove that and move the style to whichever resources you need to. Explanation as comments within the xaml:
<Grid Background="Blue">
<Grid.Resources>
<!-- Override the default button style, otherwise you get a grey
rectangle behind the ellipse when disabled -->
<Style TargetType="Button" x:Key="MyButtonStyle">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter x:Name="MyContentPresenter"
Content="{TemplateBinding Content}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Button x:Name="button" Height="30" Width="100"
BorderThickness="0" BorderBrush="Transparent" IsEnabled="false"
Style="{StaticResource MyButtonStyle}">
<Button.Content>
<Border CornerRadius="12.5" Height="25" Width="95">
<Border.Style>
<Style TargetType="Border">
<!-- Button is gray by default, i.e. when enabled -->
<Setter Property="Background" Value="Gray"/>
<Style.Triggers>
<!-- If the button becomes disabled then it becomes green -->
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="Green" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<TextBlock Text="Back" HorizontalAlignment="Center" VerticalAlignment="Center"
Foreground="White"/>
</Border>
</Button.Content>
</Button>
</Grid>

How do you specify a custom ListBoxItem template that will popup any usercontrol

I am trying to write a custom ListBox that will popup a user specifed control at runtime. I have made a custom RadioButton that I want to have display a popup when the user selects one of the buttons in the list
Here Is the xaml for the custom ListBox control. I am trying to use my custom radio button as the ListboxItem:
<ListBox
x:Class="PopUp.SystemAccessPanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="clr-namespace:System;assembly=mscorlib"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:PopUp"
d:DataContext="{d:DesignInstance local:PanelButton}"
mc:Ignorable="d"
>
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<StackPanel>
<local:PanelButton
x:Name="Button1"
Foreground="{TemplateBinding Foreground}"
GroupName="{Binding GroupName}"
ButtonText="{Binding ButtonText}"
Margin="0,0,0,20"
/>
<Popup
x:Name="PART_Popup"
IsOpen="{Binding IsChecked, ElementName=Button1}"
PlacementTarget="{Binding ElementName=Button1}"
Placement="Absolute"
VerticalOffset="{Binding AbsoluteYPlacement}"
HorizontalOffset="{Binding AbsoluteXPlacement}"
local:BaseExtendedPopup.ClosesOnInput="True"
>
<ContentPresenter/>
</Popup>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
<ListBox.Template>
<ControlTemplate>
<Border
BorderThickness="0"
Padding="1,1,1,1"
Background="Transparent"
Name="theBorder"
SnapsToDevicePixels="True"
>
<ItemsPresenter
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"
/>
</Border>
<!--
<ControlTemplate.Triggers>
<Trigger Property="ItemsControl.IsGrouping" Value="True">
<Setter Property="ScrollViewer.CanContentScroll" Value="False" />
</Trigger>
</ControlTemplate.Triggers>
-->
</ControlTemplate>
</ListBox.Template>
</ListBox>
And here I how i want the control to be used:
<usr:SystemAccessPanel Foreground="Pink" Background="Aqua">
<usr:PanelButton
ButtonText="What"
ImageWidth="50"
ImageHeight="50"
Width="40"
GroupName="Test"
AbsoluteXPlacement="900"
AbsoluteYPlacement="100"
>
<usr:UserControl2/>
</usr:PanelButton>
<usr:PanelButton
ButtonText="The Hell"
ImageWidth="45"
Height="20" Width="100"
GroupName="Test"
AbsoluteXPlacement="900"
AbsoluteYPlacement="100"
>
<usr:UserControl1/>
</usr:PanelButton>
</usr:SystemAccessPanel>
However All I end up with is a PaneButton as a Popup =S. What do i need to do to have my usercontrol be in the popup?

How to add an icon on a rectangle's border corner?

I would like to add an image on the upper-right corner of a rectangle (something that I'll use as a kind of toggle button eventually).
How can I do that?
This is the xaml:
<UserControl x:Class="EmulationScreenControl.RectangleSelectionControl"
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"
xmlns:emulationScreenControl="clr-namespace:EmulationScreenControl"
mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300">
<Grid SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
<Border BorderBrush="GhostWhite" BorderThickness="0" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
<Rectangle Fill="LightSkyBlue" Opacity="0.2" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased"></Rectangle>
</Border>
</Grid>

Just use a Grid to wrap both the Rectangle and the Image.
<Grid SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
<Border BorderBrush="GhostWhite" BorderThickness="0" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
<Grid>
<Rectangle Fill="LightSkyBlue" Opacity="0.2" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
</Rectangle>
<Image HorizontalAlignment="Right" VerticalAlignment="Top" Width="100" Height="100" Source="http://www.citgroup.in/images/icon/wcf.png"/>
</Grid>
</Border>
</Grid>
Here it is:

The solution I found was by Template creation:
<ControlTemplate x:Key="TopRightTemplate" TargetType="{x:Type local:SizeChrome}">
<Grid SnapsToDevicePixels="True" HorizontalAlignment="Right" VerticalAlignment="Top">
<StackPanel
Margin="-50,-50,-20,5"
Background="White"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Orientation="Horizontal">
<Image Cursor="Hand" ToolTip="Bla"
RenderOptions.EdgeMode="Aliased"
SnapsToDevicePixels="True"
RenderOptions.BitmapScalingMode="NearestNeighbor"
Width="16" Height="16"
MouseLeftButtonUp="ToggleIsMultipleScreensSelection"
>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Cursor"
Value="Hand" />
</Trigger>
<DataTrigger Binding="{Binding IsMultipleScreens}"
Value="false">
<Setter Property="Source"
Value="C:\\Users\\liorl\\Desktop\\I1.png" />
<Setter Property="ToolTip"
Value="NotMul" />
</DataTrigger>
<DataTrigger Binding="{Binding IsMultipleScreens}"
Value="true">
<Setter Property="Source"
Value="C:\\Users\\liorl\\Desktop\\I1.png" />
<Setter Property="ToolTip"
Value="Mul" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</StackPanel>
</Grid>
</ControlTemplate>

Popup does not close when scrolling

I have a textbox in which when it has focus a popup appears below it. But when the popup is open and I scroll, it appears to stay in the same spot where it was opened. I need help in figuring out how to have the popup appear below the textbox when I scroll. How would I do this in xaml?
Thanks!
MainWindow View:
<Grid x:Name="LayoutRoot">
<ScrollViewer>
<local:ControlView/>
</ScrollViewer>
</Grid>
Resource Dictionary:
<Style TargetType="{x:Type Popup}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=txtTest, Path=IsKeyboardFocused}" Value="True">
<Setter Property="IsOpen" Value="True" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=txtTest, Path=IsKeyboardFocused }" Value="False">
<Setter Property="IsOpen" Value="False" />
</DataTrigger>
</Style.Triggers>
</Style>
<Style x:Key="BorderStyle" TargetType="{x:Type Border}">
<Setter Property="Background" Value="LemonChiffon"/>
<Setter Property="Padding" Value="5"/>
</Style>
UserControl View:
<Grid x:Name="LayoutRoot">
<StackPanel Grid.Row="1" Grid.Column="4" Orientation="Vertical">
<Button Content="Button" Width="100" Height="100"/>
<Button Content="Button" Width="100" Height="100"/>
<TextBox x:Name="txtTest" HorizontalAlignment="Stretch"/>
<Popup Name="TestPopup" StaysOpen="True"
PlacementTarget="{Binding ElementName=txtTest}"
AllowsTransparency="True" Placement="{Binding ElementName=txtTest}">
<Border Style="{DynamicResource BorderStyle}">
<GroupBox Header="Test Popup">
<ScrollViewer Margin="0,2,0,0" VerticalScrollBarVisibility="Hidden">
<!--BINDING-->
<Label Content="Hello World!"/>
</ScrollViewer>
</GroupBox>
</Border>
</Popup>
<ContentPresenter Content="{Binding testBinding}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
</ContentPresenter>
</StackPanel>
</Grid>

Try this:
<Style TargetType="{x:Type Popup}">
<Setter
Property="IsOpen"
Value="{Binding IsKeyboardFocusedWithin, ElementName=txtTest, Mode=OneWay}"/>
</Style>