WPF Path - WPF Discussion Boards

Re: Expander Styling Question

20-Mar-12 14:13

The XAML's a bit long here, so please bear with me.

I have styled an expander to look like this[^].

I am very new to styling, so I could use some help. When the expander is collaped I want the rectangle and arrow to be gray. When expanded, I'd like to change the color to orange. I would also like to redraw the arrows facing up.

I got the idea from the expanders here[^].

I really don't know how to go about doing this. Could someone point me in the right direction?

The XAML is

<Window.Resources>

    <Color x:Key="Color1">Gray</Color>
    <Color x:Key="Color2">SlateGray</Color>
    <Color x:Key="Color3">DarkSlateGray</Color>
    <Color x:Key="HeaderGradientBrush1">DarkGray</Color>
    <Color x:Key="HeaderGradientBrush2">White</Color>

    <SolidColorBrush x:Key="ToggleButtonEllipseBorderBrush" Color="{StaticResource Color1}" />
    <SolidColorBrush x:Key="ToggleButtonArrowBrush" Color="{StaticResource Color2}" />
    <SolidColorBrush x:Key="ToggleButtonRectangleBrush" Color="{StaticResource Color2}" />
    <SolidColorBrush x:Key="ToggleButtonBackgroundBrush" Color="Transparent" />
    <SolidColorBrush x:Key="ContentAreaBackgroundBrush" Color="Transparent" />
    <SolidColorBrush x:Key="ExpanderBorderBrush" Color="{StaticResource Color1}" />
    <SolidColorBrush x:Key="ExpanderHeaderTextColor" Color="{StaticResource Color3}" />
    <LinearGradientBrush x:Key="headerGradientBrush"
                            EndPoint="0.504,1.5"
                            StartPoint="0.504,0.03">
        <GradientStop Color="{StaticResource HeaderGradientBrush1}" Offset="0" />
        <GradientStop Color="{StaticResource HeaderGradientBrush2}" Offset="0.567" />
    </LinearGradientBrush>

    <!--Control template for the Toggle Button-->
    <ControlTemplate x:Key="ExpanderToggleButton"
                        TargetType="{x:Type ToggleButton}">

        <Grid Width="16"
                Height="16">

            <Path Stroke="{StaticResource ToggleButtonArrowBrush}"
                    Data="M 3,4 l 5,5 5,-5" />

            <Path Stroke="{StaticResource ToggleButtonArrowBrush}"
                    Data="M 3,7 l 5,5 5,-5" />

            <ContentPresenter VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                Content="{TemplateBinding Content}" />

        </Grid>

    </ControlTemplate>

    <!-- Expander style -->
    <Style TargetType="Expander">

        <Setter Property="Foreground"
                Value="{StaticResource ExpanderHeaderTextColor}" />
        <Setter Property="Template">
            <Setter.Value>

                <!-- Control template for Expander -->
                <ControlTemplate TargetType="Expander">
                    <Grid>
                            
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Name="ContentRow"
                                            Height="0" />
                        </Grid.RowDefinitions>
                            
                        <!--Header Area-->
                        <Border Name="Border"
                                Grid.Row="0"
                                Background="{StaticResource headerGradientBrush}"
                                BorderBrush="{StaticResource ExpanderBorderBrush}"
                                BorderThickness="1">

                            <Grid>

                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="20" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="20" />
                                </Grid.ColumnDefinitions>

                                <!--Rectangle in the header-->
                                <Border Grid.Row="0"
                                        Background="{StaticResource ToggleButtonRectangleBrush}"
                                        BorderBrush="{StaticResource ExpanderBorderBrush}"
                                        Margin="-4,2,2,2"
                                        Width="10"/>
                                        
                                    <!-- The following puts the toggle button in the right hand column, just like I want! -->
                                <ToggleButton Grid.Column="2"
                                                IsChecked="{Binding Path=IsExpanded,Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                                OverridesDefaultStyle="True"
                                                Template="{StaticResource ExpanderToggleButton}"
                                                Background="{StaticResource ToggleButtonBackgroundBrush}" />

                                <ContentPresenter Grid.Column="1"
                                                    Margin="5"
                                                    ContentSource="Header"
                                                    RecognizesAccessKey="True" />
                            </Grid>

                        </Border>
                            
                        <!--Content Area-->
                        <Border Name="Content"
                                Grid.Row="1"
                                Background="{StaticResource ContentAreaBackgroundBrush}"
                                BorderBrush="{StaticResource ExpanderBorderBrush}"
                                BorderThickness="1,0,1,1"
                                CornerRadius="0,0,3,3">

                            <ContentPresenter Margin="4" />

                        </Border>
                            
                    </Grid>
                        
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded"
                                    Value="True">
                            <Setter TargetName="ContentRow"
                                    Property="Height"
                                    Value="{Binding ElementName=Content,Path=DesiredHeight}" />
                            <Setter TargetName="Border"
                                    Property="BorderBrush"
                                    Value="{StaticResource ExpanderBorderBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                    
                </ControlTemplate>
                    
            </Setter.Value>
                
        </Setter>
            
    </Style>
        
</Window.Resources>

Thank you.

Everything makes sense in someone's mind

Varsha Ramnani21-Mar-12 0:49

Varsha Ramnani

21-Mar-12 0:49

For Arrow Direction Change you can Use ControlTemplate.Triggers in ToggleButton ControlTemplate

<Color x:Key="Color4">Orange</Color>
<SolidColorBrush x:Key="ToggleButtonUpArrowBrush" Color="{StaticResource Color4}" />	
<ControlTemplate x:Key="ExpanderToggleButton" TargetType="{x:Type ToggleButton}"> 
        <Grid Width="16" Height="16"> 
            <Path Stroke="{StaticResource ToggleButtonArrowBrush}"
                    Data="M 3,4 l 5,5 5,-5" /> 
            <Path Stroke="{StaticResource ToggleButtonArrowBrush}"
                    Data="M 3,7 l 5,5 5,-5" /> 
            <ContentPresenter VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                Content="{TemplateBinding Content}" /> 
        </Grid> 
        <ControlTemplate.Triggers>
	     <Trigger Property="IsChecked" Value="true">
                <Setter Property="Data" TargetName="arrow1" Value="M 3,9 l 5,-5 5,5"/>
		<Setter Property="Data" TargetName="arrow2" Value="M 3,6 l 5,-5 5,5"/>
		<Setter Property="Stroke" TargetName="arrow1" Value="{StaticResource ToggleButtonUpArrowBrush}"/>
		<Setter Property="Stroke" TargetName="arrow2" Value="{StaticResource ToggleButtonUpArrowBrush}"/>
             </Trigger>						
	</ControlTemplate.Triggers>
    </ControlTemplate>

And For the Left most Rectangle rather than using a Border use a rectange & use its fill property like

<Style TargetType="Expander">
    <Setter Property="Foreground" Value="{StaticResource ExpanderHeaderTextColor}" />
        <Setter Property="Template">
           <Setter.Value>
           <!-- Control template for Expander -->
                <ControlTemplate TargetType="Expander">
                    <Grid>
                      <Grid.RowDefinitions>
                         <RowDefinition Height="Auto" />
                         <RowDefinition Name="ContentRow" Height="0" />
                      </Grid.RowDefinitions>
                      <!--Header Area-->
                      <Border Name="Border" Grid.Row="0" BorderBrush="{StaticResource ExpanderBorderBrush}"
                                BorderThickness="1">
                      <Grid>
                          <Grid.ColumnDefinitions>
                              <ColumnDefinition Width="20" />
                              <ColumnDefinition Width="*" />
                              <ColumnDefinition Width="20" />
                          </Grid.ColumnDefinitions>
                          <!--Rectangle in the header-->
                         <Rectangle Grid.Row="0" x:Name="LeftPanel" Fill="{StaticResource ExpanderBorderBrush}" Width="10" HorizontalAlignment="Left"/>                          
<!-- The following puts the toggle button in the right hand column, just like I want! -->
                          <ToggleButton Grid.Column="2" IsChecked="{Binding Path=IsExpanded,Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" OverridesDefaultStyle="True" Template="{StaticResource ExpanderToggleButton}"/>
                          <ContentPresenter Grid.Column="1" Margin="5" ContentSource="Header" RecognizesAccessKey="True" />
                            </Grid>
                      </Border>
                      <!--Content Area-->
                      <Border Name="Content"
                                Grid.Row="1"
                                
                                BorderBrush="{StaticResource ExpanderBorderBrush}"
                                BorderThickness="1,0,1,1"
                                CornerRadius="0,0,3,3">
                                <ContentPresenter Margin="4" />
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded"
                                    Value="True">
                                <Setter TargetName="ContentRow"
                                    Property="Height"
                                    Value="{Binding ElementName=Content,Path=DesiredHeight}" />
                                <Setter TargetName="Border"
                                    Property="BorderBrush"
                                    Value="{StaticResource ExpanderBorderBrush}" />
				<Setter TargetName="LeftPanel" Property="Fill" Value="{StaticResource ToggleButtonUpArrowBrush}"/>                    
                           </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Hope this is what you were looking for.

"The difference between who you are and who you want to be is what you want to do.... And what you have to do to get where you want to be
may not be pretty or may not come easy..."

"When I get sad, I stop being sad and be awesome instead." - Barney Stinson (from "How I Met Your Mother") - lewax00

Re: Expander Styling Question

Abhinav S21-Mar-12 4:14

Abhinav S

21-Mar-12 4:14

Should be useful to the OP.

Re: Expander Styling Question

Kevin Marois21-Mar-12 7:25

21-Mar-12 7:25

That worked perfectly. Thank you!

Everything makes sense in someone's mind

WPF Path

Kevin Marois20-Mar-12 8:44

20-Mar-12 8:44

1) Anyone have a decent explantion of how Paths work? I have been researching it and it's still confusing.

2)
I found this example:

<Path Fill="SlateGray"
      Data="M 2.5,5 l 10,0 l -5,6 Z" />

which draws a small down-facing arrow. How do you turn it so it's facing up?

Everything makes sense in someone's mind

Pete O'Hanlon20-Mar-12 11:42

20-Mar-12 11:42

I suppose it's easiest to explain how the Path statement works if we take your example.

First of all, let's see what M 2.5, 5 does? This moves the starting point to a point that is at 2.5, 1 relative to the owning container.

Next, l 10, 0 draws a line that starts at the point we specfied above, and ends at the point 10, 0.

Finally, l -5,6 Z draws the path from the point at 10, 0 and ends at -5,6. The Z tells the renderer to close the shape, so a line is drawn to the point that we started off with.

*pre-emptive celebratory nipple tassle jiggle* - Sean Ewington

"Mind bleach! Send me mind bleach!" - Nagy Vilmos

My blog | My articles | MoXAML PowerToys | Mole 2010 - debugging made easier - my favourite utility

Kevin Marois20-Mar-12 11:44

20-Mar-12 11:44

Thanks.

this[^]. Reading it now

Everything makes sense in someone's mind

Kevin Marois20-Mar-12 11:56

20-Mar-12 11:56

Ok, I got it now.

BTW, is it possible to change a path using a trigger?

Everything makes sense in someone's mind

Pete O'Hanlon20-Mar-12 12:23

20-Mar-12 12:23

Of course it is. You'd have to supply a completely new Data if that's what you were trying to achieve, but it is certainly doable.

*pre-emptive celebratory nipple tassle jiggle* - Sean Ewington

"Mind bleach! Send me mind bleach!" - Nagy Vilmos

My blog | My articles | MoXAML PowerToys | Mole 2010 - debugging made easier - my favourite utility

Bind To Command On ViewModel

Abhinav S21-Mar-12 4:13

Abhinav S

21-Mar-12 4:13

A path is a geometric representation of a figure.
For e.g M stands for move or startpoint. M or m can both indicate different things. V would mean a vertical line.

This[^] does explain the syntax in little detail - however, using Expression Blend is actually a much easier option to generate paths[^].

Kevin Marois19-Mar-12 13:46

Re: Bind To Command On ViewModel

19-Mar-12 13:46

In my view I have a data template with a button in it:

<Button x:Name="SelectionToggle"
    Command="{Binding SelectionToggleCommand, Mode=TwoWay}"
    Grid.Column="1"/>

The output window shows that "SelectionToggleCommand" is not found on the model. How do I properly bind this command to the viewmodel?

Thanks

Everything makes sense in someone's mind

Pete O'Hanlon20-Mar-12 5:28

Re: Bind To Command On ViewModel

20-Mar-12 5:28

One of the wonderful thing about WPF is that Command properties can bind to any class that implements ICommand. Typical examples are Josh Smith's RelayCommand or PRISMs DelegateCommand. Suppose that you have RelayCommand, then you would hook it up like this:

private RelayCommand selectionToggleCommand;
public RelayCommand SelectionToggleCommand
{
  get
  {
    if (selectionToggleCommand == null)
    {
      selectionToggleCommand = new RelayCommand(SelectToggle, CanSelectToggle);
    }
    return selectionToggleCommand;
  }
}

private void SelectToggle(object o)
{
}

private bool CanSelectToggle(object o)
{
  return true;
}

*pre-emptive celebratory nipple tassle jiggle* - Sean Ewington

"Mind bleach! Send me mind bleach!" - Nagy Vilmos

My blog | My articles | MoXAML PowerToys | Mole 2010 - debugging made easier - my favourite utility

Kevin Marois20-Mar-12 5:55

Re: Bind To Command On ViewModel

20-Mar-12 5:55

I get that much. The problem is that my XAML is in a data template and the message I get says it can't find the command on my data model.

So I need to tell my code to look on the data context, not the model.

Everything makes sense in someone's mind

Pete O'Hanlon20-Mar-12 6:05

20-Mar-12 6:05

Without knowing how and where your DataTemplate is linked in, I can't offer too much other than to say you really need to look at using a RelativeSource to find the element you are interested in to get the DataContext from.

*pre-emptive celebratory nipple tassle jiggle* - Sean Ewington

"Mind bleach! Send me mind bleach!" - Nagy Vilmos

My blog | My articles | MoXAML PowerToys | Mole 2010 - debugging made easier - my favourite utility

slverlight 3.0

manivinof519-Mar-12 1:47

manivinof5

19-Mar-12 1:47

i need good website to learn silverlight3.0 can anyone suggests me?

Richard MacCutchan19-Mar-12 1:50

Richard MacCutchan

19-Mar-12 1:50

How about the Silverlight Web Site[^]?

Unrequited desire is character building. OriginalGriff
I'm sitting here giving you a standing ovation - Len Goodman

manivinof519-Mar-12 1:54

manivinof5

19-Mar-12 1:54

just i wanna learn about silverlight3.0 so, i need your suggestion..

Pete O'Hanlon19-Mar-12 2:00

19-Mar-12 2:00

Why do you want to learn Silverlight 3? It's at version 5 now, and it's way ahead in terms of functionality.

*pre-emptive celebratory nipple tassle jiggle* - Sean Ewington

"Mind bleach! Send me mind bleach!" - Nagy Vilmos

My blog | My articles | MoXAML PowerToys | Mole 2010 - debugging made easier - my favourite utility

manivinof519-Mar-12 2:05

manivinof5

19-Mar-12 2:05

actually i just need to know all the difference between silverlight versions thats why? i knew about earlier versions..