0

In my current project, I have this XAML file where I define the visual style that must be applied to different types of custom widgets.

For example, the style for a 'DirectLineButton' (a custom class that inherits from WPF's Button) is as follows:

    <Style x:Key="DirectLineButtonTemplate" TargetType="{x:Type View:DirectLineButton}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="MinHeight" Value="23"/>
<Setter Property="MinWidth" Value="75"/>
<Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type Button}">
        <Border x:Name="MyBorder"  
               CornerRadius="2" 
               BorderThickness="2"
               Background="Gold"
               BorderBrush="Gray">
        <ContentPresenter Margin="2"
             HorizontalAlignment="Center"
             VerticalAlignment="Center"
             RecognizesAccessKey="True"/>
        </Border>
        <ControlTemplate.Triggers>
        <Trigger Property="View:DirectLineButton.State" Value="DirectLineAvailable">
            <Setter TargetName="MyBorder" Property="Background" Value="Gold"/>
        </Trigger>
        <Trigger Property="View:DirectLineButton.State" Value="DirectLineIdle">
            <Setter  TargetName="MyBorder" Property="Background" Value="Silver"/>
        </Trigger>
        <Trigger Property="View:DirectLineButton.State" Value="DirectLineBusy">
            <Setter  TargetName="MyBorder" Property="Background" Value="Green"/>
        </Trigger>
        <Trigger Property="View:DirectLineButton.State" Value="DirectLineCalled">
            <Setter  TargetName="MyBorder" Property="Background" Value="LightBlue"/>
        </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    </Setter.Value>
</Setter>
</Style>

Now, I need to replicate this idea by defining the style for a Rectangle. Unfortunately, WPF flags an error message when I try to define a ControlTemplate for a rectangle, can you suggest a workaround for this? See the code below of what I'm trying to attempt:

    <Style x:Key="MyRectangleTemplate" TargetType="{x:Type Rectangle}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="MinHeight" Value="23"/>
<Setter Property="MinWidth" Value="75"/>
<Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type Rectangle}">
        <Border x:Name="MyBorder"  
               CornerRadius="2" 
               BorderThickness="2"
               Background="Gold"
               BorderBrush="Gray">
        <ContentPresenter Margin="2"
             HorizontalAlignment="Center"
             VerticalAlignment="Center"
             RecognizesAccessKey="True"/>
        </Border>
        <ControlTemplate.Triggers>
        <Trigger Property="View:DirectLineButton.State" Value="DirectLineAvailable">
            <Setter TargetName="MyBorder" Property="Background" Value="Gold"/>
        </Trigger>
        <Trigger Property="View:DirectLineButton.State" Value="DirectLineIdle">
            <Setter  TargetName="MyBorder" Property="Background" Value="Silver"/>
        </Trigger>
        <Trigger Property="View:DirectLineButton.State" Value="DirectLineBusy">
            <Setter  TargetName="MyBorder" Property="Background" Value="Green"/>
        </Trigger>
        <Trigger Property="View:DirectLineButton.State" Value="DirectLineCalled">
            <Setter  TargetName="MyBorder" Property="Background" Value="LightBlue"/>
        </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    </Setter.Value>
</Setter>
</Style>

Thanks in advance!

3 Answers 3

1

Hi you will have to do it with Border only.Controls that inherits FrameworkElement only can have Template . But Rectangle , Line etc are lighter versions they inherits only UIElement not FrameworkElement.I hope this will help. Conclusion: Rectange do not have Template property

3
  • Actually, Rectangle is derived from FrameworkElement. Control templates are only available for...controls :)
    – Adi Lester
    Commented Nov 20, 2012 at 16:39
  • yes my bad , i got bit confused, its just fault of VisualStudio that provide us so much info that we dont have to remember each and everything.
    – yo chauhan
    Commented Nov 20, 2012 at 16:53
  • @ethicallogics : could you please edit your answer to give the right heritance scheme ? ( i delete this comment once you've done it ) Commented Nov 21, 2012 at 1:25
1

You can't define a control template for a Rectangle, since it's not a control, but a Shape. You can only define a control template for classes derived from Control.

0

You should
1) use a Style (not a ControlTemplate) to have rounded borders.
2) Use a Trigger inside your style.

The following Xaml should get you closer from your goal :

 <Style x:Key="MyRectangleStyle" TargetType="{x:Type Rectangle}">
       <Setter Property="SnapsToDevicePixels" Value="true"/>
       <Setter Property="OverridesDefaultStyle" Value="true"/>
       <Setter Property="MinHeight" Value="23"/>
       <Setter Property="MinWidth" Value="75"/>
        <Setter Property="Fill" Value="Blue"/>

       <Setter Property="RadiusX" Value="2" />
       <Setter Property="RadiusY" Value="2" />

  <Style.Triggers>
    <DataTrigger Binding="{Binding DirectLineState}" 
                        Value="{x:Static l:DLS.Available}">
        <Setter Property="Fill" Value="Gold"/>
    </DataTrigger>
    <DataTrigger Binding="{Binding DirectLineState}" 
                        Value="{x:Static l:DLS.Idle}" >
        <Setter Property="Fill" Value="Silver"/>
    </DataTrigger >
    <DataTrigger Binding="{Binding DirectLineState}"                            
                         Value="{x:Static l:DLS.Available}">
        <Setter Property="Fill" Value="Green"/>
    </DataTrigger >
    <DataTrigger Binding="{Binding DirectLineState}" 
                         Value="{x:Static l:DLS.Called}">
        <Setter  Property="Fill" Value="LightBlue"/>
    </DataTrigger >
  </Style.Triggers>
</Style>

(notice that :
1) i changed the key for "MyRectangleStyle".
2) If you want this Style to be the default Style, do not give it a Key, but just a TargetType...
3) ...OR set the Key to "{x:Type Rectangle}". msdn seems to prefer that way.
btw : shouldn't you be using DataTriggers on public properties instead of Triggers ? but i don't know the whole architecture of your application. )

Rq : for the code above to work, you need :
1) a public proprety called DirectLineState raising NotifyPropertyChanged on change.
2) an enum called DLS defined in a separate file (like a class) in your project
3) you need "l" to be your project NameSpace.

     <xmlns:l="clr-namespace:MyProjectNameSpace" >   

4) Assign Style and set proper DataContext for the Rectangle

3
  • Thanks for your reply. I've tried your approach and the correct background colour is being set at start-up based on the initial state. However, when I change the associated value to the component's "State" dependency property, the background colour remains the same (i.e., it doesn't get updated). It seems to me that I'm missing one last step in here, any ideas?
    – Nacho1984
    Commented Nov 21, 2012 at 9:23
  • 1) you have to check that the DataContext is the right one. To be sure for your test just give your rectangle a name and assign DataContext in window constructor. 2) as i said i don't understand how your button template works : you should be using DataTrigers. I updated my answer, and as it is now it works (i tested). Commented Nov 21, 2012 at 12:44
  • Hello, sorry for my late reply! My original post was actually made on behalf of a colleague who was experiencing the problem. He finally solved it by assembling the custom control using buttons instead of rectangles. Once again, thanks for your help!
    – Nacho1984
    Commented Dec 5, 2012 at 9:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.