Expander Styling Question - 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