WPF User Control Draw Border Conditionally - wpf

Question

I am drawing a custom control with the following xaml. The control has property named Angle, to rotate the control. If the angle is 90 degree, i want to draw the border differently. How can I conditionally do that in xaml?
<local:BaseControl x:Class="WPFManualControls.Valve"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WPFManualControls" x:Name="ValveControl" Loaded="ValveControl_Loaded">
<local:BaseControl.Resources>
<local:ValveMenuEnableConverter x:Key="ValveMenuEnableConverter"/>
<local:PinVisibleConverter x:Key="PinVisibleConverter"/>
<local:UnknownPinVisibleConverter x:Key="UnknownPinVisibleConverter"/>
<local:MenuVisibleConverter x:Key="MenuVisibleConverter"/>
<LinearGradientBrush x:Key="MenuBorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA2A5A7" Offset="0"/>
<GradientStop Color="#FFA2A5A7" Offset="1"/>
<GradientStop Color="#FFA2A5A7" Offset="0.502"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="MenuItemBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA1B3C5" Offset="0"/>
<GradientStop Color="#FFA1B3C5" Offset="1"/>
<GradientStop Color="#FFFEFEFE" Offset="0.534"/>
</LinearGradientBrush>
<Style TargetType="{x:Type MenuItem}">
<EventSetter Event="MenuItem.Click" Handler="OnValveMenuItemClick"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="Border" Width="150" Height="30" Background="#FF222624" CornerRadius="5"
Margin="3" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="Stretch" VerticalAlignment="Center">
<Grid VerticalAlignment="Center">
<!-- The Grid is used to hold together columns for an Icon, Content, Glyph checkmark and Arrow to show the next level
Size sharing is used in Grid so that the Icon, Content, Arrow for each MenuItem align together -->
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="17" Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/>
<ColumnDefinition Width="14"/>
</Grid.ColumnDefinitions>
<!-- ContentPresenter to show an Icon if needed -->
<ContentPresenter Margin="4,0,6,0" x:Name="Icon" VerticalAlignment="Center"
ContentSource="Icon"/>
<!-- Glyph is a checkmark if needed for a checkable menu -->
<Grid Visibility="Hidden" Margin="4,0,6,0" x:Name="GlyphPanel" VerticalAlignment="Center">
<Path x:Name="GlyphPanelpath" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,2 L0,4.8 L2.5,7.4 L7.1,2.8 L7.1,0 L2.5,4.6 z" FlowDirection="LeftToRight"/>
</Grid>
<!-- Content for the menu text etc -->
<ContentPresenter Grid.Column="1"
Margin="{TemplateBinding Padding}"
x:Name="HeaderHost" RecognizesAccessKey="True"
ContentSource="Header" />
<!-- Arrow drawn path which points to the next level of the menu -->
<Grid Grid.Column="3" Margin="4,0,6,0" x:Name="ArrowPanel" VerticalAlignment="Center">
<Path x:Name="ArrowPanelPath" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,0 L0,8 L4,4 z"/>
</Grid>
<!-- The Popup is the body of the menu which expands down or across depending on the level of the item -->
<Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
Placement="Right" x:Name="SubMenuPopup" Focusable="false" AllowsTransparency="true"
PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}"
VerticalOffset="-3">
<Grid x:Name="SubMenu" VerticalAlignment="Center">
<Border VerticalAlignment="Center" x:Name="SubMenuBorder" BorderBrush="{DynamicResource SolidBorderBrush}" BorderThickness="1"/>
<!-- StackPanel holds children of the menu. This is set bu IsItemsHost=True -->
<StackPanel VerticalAlignment="Center" IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>
</Grid>
</Popup>
</Grid>
</Border>
<!-- These triggers re-configure the four arrangements of MenuItem to show different levels of menu via Role -->
<ControlTemplate.Triggers>
<!-- Role = TopLevelHeader : this is the root menu item in a menu; the Popup expands down -->
<Trigger Property="Role" Value="TopLevelHeader">
<Setter Property="Margin" Value="0,1,0,1"/>
<Setter Property="Padding" Value="6,3,6,3"/>
<Setter Property="Grid.IsSharedSizeScope" Value="true"/>
<Setter Property="Placement" Value="Bottom" TargetName="SubMenuPopup"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<!-- Role = TopLevelItem : this is a child menu item from the top level without any child items-->
<Trigger Property="Role" Value="TopLevelItem">
<Setter Property="Margin" Value="0,1,0,1"/>
<Setter Property="Padding" Value="6,3,6,3"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<!-- Role = SubMenuHeader : this is a child menu item which does not have children -->
<Trigger Property="Role" Value="SubmenuHeader">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
<Setter Property="Grid.IsSharedSizeScope" Value="true"/>
</Trigger>
<!-- Role = SubMenuItem : this is a child menu item which has children-->
<Trigger Property="Role" Value="SubmenuItem">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<Trigger Property="IsSuspendingPopupAnimation" Value="true">
<Setter Property="PopupAnimation" Value="None" TargetName="SubMenuPopup"/>
</Trigger>
<!-- If no Icon is present the we collapse the Icon Content -->
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<!-- The GlyphPanel contains the CheckMark -->
<Trigger Property="IsChecked" Value="true">
<Setter Property="Visibility" Value="Visible" TargetName="GlyphPanel"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<Trigger Property="AllowsTransparency" SourceName="SubMenuPopup" Value="true">
<Setter Property="Margin" Value="0,0,3,3" TargetName="SubMenu"/>
<Setter Property="SnapsToDevicePixels" Value="true" TargetName="SubMenu"/>
<Setter Property="BitmapEffect" Value="{DynamicResource PopupDropShadow}" TargetName="SubMenuBorder"/>
</Trigger>
<!-- Using the system colors for the Menu Highlight and IsEnabled-->
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" TargetName="Border"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="DarkGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontWeight" Value="Bold"/>
</Style>
<Style TargetType="{x:Type local:Valve}">
<EventSetter Event="MouseLeftButtonUp" Handler="onMouseLeftDown">
</EventSetter>
<!--width= 35 height = 30-->
<Setter Property="Width" Value="33"/>
<Setter Property="Height" Value="28"/>
<Setter Property="ContextMenu">
<Setter.Value>
<ContextMenu Visibility="{Binding IsReadOnly, Converter={StaticResource MenuVisibleConverter}}" Name="ValveMenu" Background="{StaticResource MenuBorderBrush}">
<MenuItem Header="Open" Tag="{Binding ValveOpenCmdValue}"
IsEnabled="{Binding ValveStatus, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, ConverterParameter=Open,
Converter={StaticResource ValveMenuEnableConverter}}">
</MenuItem>
<MenuItem Header="Close" Tag="{Binding ValveCloseCmdValue}"
IsEnabled="{Binding Path=ValveStatus, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, ConverterParameter=Close, Converter={StaticResource ValveMenuEnableConverter}}">
</MenuItem>
</ContextMenu>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="ValveType" Value="SimpleValve">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Valve}">
<Viewbox Stretch="None" >
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Background="White" Name="grid" RenderTransformOrigin="0.5,0.5" >
<Border Background="#FF338471" BorderBrush="Black" BorderThickness="0,0,1,0">
<Border Background="#FF338471" BorderBrush="Black" BorderThickness="0,0,0,1">
<Border Background="#FF338471" BorderBrush="White" BorderThickness="1,1,0,0">
<Path x:Name="path" StrokeThickness="0.5" Fill="{Binding StateBackground,ElementName=ValveControl, UpdateSourceTrigger=PropertyChanged}" Margin="7,3,7,3"
Stretch="Fill" Stroke="#FF000000"
Data="M0.58299745,0.57220548 L0.5,35.822212 24.874998,17.947205 z M49.589987,35.749308 L49.826791,0.49999999 25.374882,18.072205 z" >
</Path>
</Border>
</Border>
</Border>
<Grid.RenderTransform>
<RotateTransform Angle="{Binding Angle, ElementName=ValveControl, UpdateSourceTrigger=PropertyChanged}" />
<!--<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="{Binding Angle, ElementName=ValveControl, UpdateSourceTrigger=PropertyChanged}" />
<TranslateTransform/>
</TransformGroup>-->
</Grid.RenderTransform>
</Grid>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="Angle" Value="90">
<Setter Property="Width" Value="33"/>
<Setter Property="Height" Value="28"/>
</Trigger>
<Trigger Property="ValveType" Value="ThrottleValve">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Valve}">
<Grid Background="#FF338471" >
<Viewbox>
<!--<Border Width="35" Height="35" Background="#FF338471" BorderBrush="Black" BorderThickness="1,1,1,1">
<Grid Margin="1" >
<Path Fill="Black" Stretch="Fill" Stroke="Black" Margin="0,5.577,0,3.242" Data="M15.75,3 L18.5,0.5 98.5,79.5 95.5,82.25 z M0.5,41.25 L0.5,44.5 119.25,44.75 119.25,41 z M6.25,40.75 L16.627914,20.841994 20.377999,23.466998 11.750134,40.75 z M9.9354524,17.376201 L24.944459,13.383842 27.511961,27.641038 z"/>
<Path Fill="{Binding Path=StateBackground, ElementName=ValveControl}" Stretch="Fill" Stroke="Black"
Margin="8.349,0,8,0" Data="M258.75,98.5 L323,98.75 301.75,119.25 300.5,172.73734 324.25,194.75 259.75,194.48734 280.75,173 280.75,120 z"/>
</Grid>
</Border>-->
<Border HorizontalAlignment="Left" Margin="5" VerticalAlignment="Top" Width="60" Height="50" >
<Grid >
<Path Fill="Black" Stretch="Fill" Stroke="Black" Margin="0,5.577,0,3.242" Data="M15.75,3 L18.5,0.5 98.5,79.5 95.5,82.25 z M0.5,41.25 L0.5,44.5 119.25,44.75 119.25,41 z M6.25,40.75 L16.627914,20.841994 20.377999,23.466998 11.750134,40.75 z M9.9354524,17.376201 L24.944459,13.383842 27.511961,27.641038 z"/>
<Path Fill="{Binding Path=StateBackground, ElementName=ValveControl}" Stretch="Fill" Stroke="Black" Margin="12.349,0,14.22,0" Data="M258.75,98.5 L323,98.75 301.75,119.25 300.5,172.73734 324.25,194.75 259.75,194.48734 280.75,173 280.75,120 z"/>
</Grid>
</Border>
</Viewbox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ValveType" Value="SlotValve">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Valve}">
<Viewbox Stretch="Fill">
<Grid >
<Rectangle Fill="{Binding Path=StateBackground, ElementName=ValveControl}" Stroke="Transparent" Width="20" Height="150"/>
</Grid>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger><!--{Binding PumpBackground, ElementName=ValveControl}-->
<Trigger Property="ValveType" Value="PinValve">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Valve}">
<Viewbox>
<DockPanel LastChildFill="True" Height="20" Width="200" >
<Rectangle Fill="YellowGreen" Stroke="Black" DockPanel.Dock="Top" Height="7" Margin="30,0,30,0" Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource PinVisibleConverter}}" />
<DockPanel DockPanel.Dock="Bottom" Height="7">
<Rectangle Fill="Black" Stroke="Black" DockPanel.Dock="Bottom" Height="7"/>
</DockPanel>
<DockPanel DockPanel.Dock="Top" Margin="0,-10,0,-7" >
<Rectangle Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource PinVisibleConverter}}"
Fill="{Binding StateBackground, ElementName=ValveControl}" Stroke="Black"
HorizontalAlignment="Left" Margin="30,0,0,0" VerticalAlignment="Top" Width="8" Height="18"/>
<Rectangle Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource PinVisibleConverter}}"
Fill="{Binding StateBackground, ElementName=ValveControl}" Stroke="Black"
DockPanel.Dock="Right" HorizontalAlignment="Right" Margin="0,0,30,0" VerticalAlignment="Top" Width="8" Height="18"/>
<Rectangle Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource UnknownPinVisibleConverter}}"
Fill="{Binding StateBackground, ElementName=ValveControl}" Stroke="Black"
HorizontalAlignment="Left" Margin="30,0,0,0" VerticalAlignment="Bottom" Width="8" Height="8"/>
<Rectangle Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource UnknownPinVisibleConverter}}"
Fill="{Binding StateBackground, ElementName=ValveControl}" Stroke="Black"
DockPanel.Dock="Right" HorizontalAlignment="Right" Margin="0,0,30,0" VerticalAlignment="Bottom" Width="8" Height="8"/>
</DockPanel>
</DockPanel>
<!--<DockPanel LastChildFill="True" Height="20" Width="200" >
<Rectangle Fill="YellowGreen" Stroke="Black" DockPanel.Dock="Top" Height="7" Margin="30,0,30,0" Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource PinVisibleConverter}}" />
<Rectangle Fill="Black" Stroke="Black" DockPanel.Dock="Bottom" Height="7"/>
<DockPanel DockPanel.Dock="Top" Margin="0,-10,0,-7" >
<Rectangle Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource PinVisibleConverter}}"
Fill="{Binding StateBackground, ElementName=ValveControl}" Stroke="Black" HorizontalAlignment="Left" Margin="30,0,0,0" VerticalAlignment="Top" Width="8" Height="18"/>
<Rectangle Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource PinVisibleConverter}}"
Fill="{Binding StateBackground, ElementName=ValveControl}" Stroke="Black" HorizontalAlignment="Right" Margin="0,0,30,0" VerticalAlignment="Top" Width="8" Height="18"/>
</DockPanel>
</DockPanel>-->
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</local:BaseControl.Resources>
<!--<Grid Width="35" Height="30" Background="#FF338471">
<Path x:Name="path" Fill="{Binding ControlBackground,ElementName=ValveControl, UpdateSourceTrigger=PropertyChanged}" Margin="5,2,5,2"
Stretch="Fill" Stroke="#FF000000"
Data="M0.58299745,0.57220548 L0.5,35.822212 24.874998,17.947205 z M49.589987,35.749308 L49.826791,0.49999999 25.374882,18.072205 z" />
</Grid>-->
<!--<Grid Name="LayoutRoot">
<Viewbox Stretch="Fill">
<Grid MouseDown="OnValveMouseDown" Width="50" Height="30" Background="#FF338471" >
<Path x:Name="path" Fill="{Binding ControlBackground,ElementName=ValveControl, UpdateSourceTrigger=PropertyChanged}" Margin="0,3,10,0"
Stretch="Fill" Stroke="#FF000000"
Data="M0.58299745,0.57220548 L0.5,35.822212 24.874998,17.947205 z M49.589987,35.749308 L49.826791,0.49999999 25.374882,18.072205 z" VerticalAlignment="Top" HorizontalAlignment="Right" Height="24" Width="30" />
<Grid.ContextMenu>
<ContextMenu Name="ValveMenu"
Background="{StaticResource MenuBorderBrush}"
>
</ContextMenu>
</Grid.ContextMenu>
</Grid>
</Viewbox>
</Grid>-->
<!--<local:BaseControl.RenderTransform>
<RotateTransform Angle="{Binding Angle, ElementName=ValveControl, UpdateSourceTrigger=PropertyChanged}" CenterX="25" CenterY="25"/>
</local:BaseControl.RenderTransform>-->
<!--<DockPanel LastChildFill="True" Height="20" Width="200" >
<Rectangle Fill="Black" Stroke="Black" DockPanel.Dock="Bottom" Height="7"/>
<DockPanel DockPanel.Dock="Top" Margin="0,0,0,-7" >
<Rectangle Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource PinVisibleConverter}}"
Fill="{Binding ControlBackground, ElementName=ValveControl}" Stroke="Black" HorizontalAlignment="Left" Margin="30,0,0,0" VerticalAlignment="Top" Width="5" Height="18"/>
<Rectangle Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource PinVisibleConverter}}"
Fill="{Binding ControlBackground, ElementName=ValveControl}" Stroke="Black" HorizontalAlignment="Right" Margin="0,0,30,0" VerticalAlignment="Top" Width="5" Height="18"/>
</DockPanel>
</DockPanel>-->
</local:BaseControl>

Answer 1

You already have a Trigger defined for the Angle Property:
<Trigger Property="Angle" Value="90">
<Setter Property="Width" Value="33"/>
<Setter Property="Height" Value="28"/>
</Trigger>
It is just a matter of adding an additional Setter, which would modify an element inside the ControlTemplate:
<Trigger Property="Angle" Value="90">
<Setter Property="Width" Value="33"/>
<Setter Property="Height" Value="28"/>
<!-- This setter will affect the Path.Data property when Angle=90 -->
<Setter TargetName="path" Property="Data" Value="M1.5,Etc"/>
</Trigger>