WPF用户控件有条件地绘制边框

时间:2014-01-03 03:55:39

标签: wpf xaml wpf-controls

我正在使用以下xaml绘制自定义控件。该控件具有名为Angle的属性,用于旋转控件。如果角度是90度,我想以不同的方式绘制边框。我怎样才能在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>

1 个答案:

答案 0 :(得分:0)

您已为Trigger媒体资源定义了Angle

<Trigger Property="Angle" Value="90">
    <Setter Property="Width" Value="33"/>
    <Setter Property="Height" Value="28"/>
</Trigger>

只需添加额外的Setter即可修改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>