Changing Expander styles

Aug 17, 2011 at 6:12 PM

I want to be able to use a style for the expander bar how can I modify it?

Coordinator
Aug 18, 2011 at 11:09 AM

Hi Adam,
if you are using Blend, use the right mouse click to create a new template from existingone, the modify it. It's a lot easier with Blend, because it creates a new style using the current one and you only have to modify it.
If you are not using Blend, I suggest you to look at the source code of the style, to see how it is done an make one in your project with your changes.

Which kind of changes you need to do  ?

Aug 18, 2011 at 3:40 PM

Thanks I can do that just want the Expander to look like the one in Windows Live Mail 2011. I have this with my own basic outlook style control I made but I like yours a bit better.

Aug 19, 2011 at 3:48 AM

I have Blend and fixed the buttons to look like I want and display the smaller images instead of the large ones. I'm having trouble with modifying the splitter bars I think it's because you're not using standard splitters.

Any help would be appreciated.

Coordinator
Aug 19, 2011 at 2:30 PM
Edited Aug 19, 2011 at 2:30 PM

the controls is NavigationPaneSplitter and the style is in the common.xaml of office xamls
here is the actual style:

	<Style TargetType="{x:Type local:NavigationPaneSplitter}">
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type local:NavigationPaneSplitter}">
					<Thumb x:Name="PART_Thumb" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Style="{StaticResource ThumbStyle}" Margin="0,2,0,2" />
				</ControlTemplate>
			</Setter.Value>
		</Setter>
		<Setter Property="BorderThickness" Value="{DynamicResource {ComponentResourceKey ResourceId=ButtonBorderThickness, TypeInTargetAssembly={x:Type local:NavigationPane}}}"/>
		<Setter Property="Background" Value="{DynamicResource {ComponentResourceKey ResourceId=Background, TypeInTargetAssembly={x:Type local:NavigationPane}}}"/>
		<Setter Property="BorderBrush" Value="{DynamicResource {ComponentResourceKey ResourceId=ButtonBorder, TypeInTargetAssembly={x:Type local:NavigationPane}}}"/>
	</Style>

you can override it... just remember to put a Thumb named PART_Thumb where you want the drag to be starting and you'll be fine 

Aug 29, 2011 at 6:00 PM

Hey, I've added the style I am wanting for the splitters to the Live.xaml and I've had to modify NavigationPane.xaml in places to do this.
I'm having trouble understanding where to add MouseOver events for when the user hovers over the splitters. I've tried a few places but I think it needs to be somewhere in this piece if so could you give me an example .

	<Style x:Key="ResizeThumb" TargetType="{x:Type Thumb}">
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type Thumb}">
                    <Grid Background="{DynamicResource {ComponentResourceKey ResourceId=Background, TypeInTargetAssembly={x:Type local:NavigationPaneSplitter}}}"/>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
		<Setter Property="Background" Value="Transparent"/>
		<Setter Property="Width" Value="5"/>
		<Setter Property="Cursor" Value="{x:Static localWindows:Cursors.SizeWE}"/>
	</Style>

Aug 29, 2011 at 6:05 PM

Here's the bars so far, I want to make them darker when hovered over.

Coordinator
Aug 29, 2011 at 9:35 PM

If you have the thumb style overriden... something like this should work:

 <Style x:Key="ThumbStyle" TargetType="{x:Type Thumb}">
  <Setter Property="Cursor" Value="{x:Static localWindows:Cursors.SizeNS}" />
  <Setter Property="Template">
   <Setter.Value>
    <ControlTemplate TargetType="{x:Type Thumb}">
     <Grid ClipToBounds="True">
      <Border x:Name="border" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" d:LayoutOverrides="Width" Height="1" VerticalAlignment="Top" Margin="0" >
       <Border.Background>
        <LinearGradientBrush EndPoint="1,1" StartPoint="0,0.5">
         <GradientStop Color="#00557081" Offset="0"/>
         <GradientStop Color="#00557081" Offset="1"/>
         <GradientStop Color="#FFB4C3CC" Offset="0.25"/>
         <GradientStop Color="#FFB4C3CC" Offset="0.75"/>
        </LinearGradientBrush>
       </Border.Background>
      </Border>
      <Rectangle x:Name="rectangle" Stroke="Black" StrokeThickness="0" Height="2" Margin="0" VerticalAlignment="Top">
       <Rectangle.Fill>
        <RadialGradientBrush>
         <GradientStop Color="#00557081" Offset="1"/>
         <GradientStop Color="#FFC4D4DE"/>
        </RadialGradientBrush>
       </Rectangle.Fill>
      </Rectangle>
     </Grid>
     <ControlTemplate.Triggers>
      <Trigger Property="IsMouseOver" Value="True">
       <Setter Property="Background" TargetName="border">
        <Setter.Value>
         <LinearGradientBrush EndPoint="1,1" StartPoint="0,0.5">
          <GradientStop Color="#00557081" Offset="0"/>
          <GradientStop Color="#00557081" Offset="1"/>
          <GradientStop Color="#FF2F97D6" Offset="0.25"/>
          <GradientStop Color="#FF2F97D6" Offset="0.75"/>
         </LinearGradientBrush>
        </Setter.Value>
       </Setter>
       <Setter Property="Fill" TargetName="rectangle">
        <Setter.Value>
         <RadialGradientBrush>
          <GradientStop Color="#00557081" Offset="1"/>
          <GradientStop Color="#FF2F97D6"/>
         </RadialGradientBrush>
        </Setter.Value>
       </Setter>
      </Trigger>
     </ControlTemplate.Triggers>
    </ControlTemplate>
   </Setter.Value>
  </Setter>
  <Setter Property="Height" Value="5"/>
  <Setter Property="VerticalAlignment" Value="Center"/>
  <Setter Property="SnapsToDevicePixels" Value="True"/>
 </Style>
 
And in <Trigger Property="IsMouseOver" Value="True"> change the color as you need
I think you have two styles, one for the horiztal thume and the other for the vertical Thumb
so you have to put the trigger in both styles
0xfefi
Aug 30, 2011 at 2:39 AM

Thanks that worked perfectly I've set both bars and made it friendly with the other themes. Here's an image inside my app:

Aug 30, 2011 at 2:47 AM

And here's the other bar when hovered over:

Apr 19, 2012 at 1:06 PM

how do u add child form, while clicking on tree its open different  contact details ???

Apr 19, 2012 at 3:11 PM

It's a bit of a Trick using the 'Treeview.Selected = MyTreeView_Selected' XAML command.

You basically track e or the Tree View item Clicked.

 

        #region Display Contact Tab

        private void MyTreeView_Selected(object sender, RoutedEventArgs e)
        {
            MyTreeView.Tag = e.OriginalSource;

            if (MyTreeView.Items.Count > 0)
            {
                buttonEditContact.IsEnabled = true;
                buttonDeleteContact.IsEnabled = true;

                TreeViewItem selectedTVI = MyTreeView.Tag as TreeViewItem;

                // create and populate the new tab and add it to the tab control
                if (Convert.ToString(selectedTVI.Header) != "MHManager.Collections.tvIndex")
                {
                    currentID.currentid = Convert.ToString(((MHManager.Collections.Contact)(((System.Windows.Controls.TreeView)(sender)).SelectedItem)).Id);

                    foreach (CloseableTabItem f in tbContacts.Items)
                    {
                        string tempvalue = "Tab" + currentID.currentid;
                        CurrentID.Text = "CurrentID: " + currentID.currentid;
                        if (f.Name == tempvalue)
                        {
                            f.Focus();                            
                            selectedTVI = getParent(selectedTVI);
                            selectedTVI.Focus();
                            return;
                        }
                    }


                    CloseableTabItem newTab = new CloseableTabItem(); 
                    newTab.Name = "Tab" + currentID.currentid;
                    newTab.Header = ((MHManager.Collections.Contact)(((System.Windows.Controls.TreeView)(sender)).SelectedItem)).Name;
                    newTab.ToolTip = ((MHManager.Collections.Contact)(((System.Windows.Controls.TreeView)(sender)).SelectedItem)).Name;
                    tbDisplayContacts Contact2 = new tbDisplayContacts(((MHManager.Collections.Contact)(((System.Windows.Controls.TreeView)(sender)).SelectedItem)).Id);
                    tbDisplayContacts Contact3 = new tbDisplayContacts(((MHManager.Collections.Contact)(((System.Windows.Controls.TreeView)(sender)).SelectedItem)).Id);
                    

                    // preparing tab content slider transformation
                    ScaleTransform scaleTransform = new ScaleTransform();
                    Binding scaleXBinding = new Binding("Value");
                    scaleXBinding.Source = scaleSlider;
                    Binding scaleYBinding = new Binding("Value");
                    scaleYBinding.Source = scaleSlider;

                    // binding main form slider to tab content
                    BindingOperations.SetBinding(scaleTransform,
                                                 ScaleTransform.ScaleXProperty,
                                                 scaleXBinding);
                    BindingOperations.SetBinding(scaleTransform,
                                                 ScaleTransform.ScaleYProperty,
                                                 scaleYBinding);

                    // preparing tab content slider transformation
                    ScaleTransform scaleTransform2 = new ScaleTransform();
                    Binding scaleXBinding2 = new Binding("Value");
                    scaleXBinding2.Source = scaleSlider2;
                    Binding scaleYBinding2 = new Binding("Value");
                    scaleYBinding2.Source = scaleSlider2;

                    // binding main form slider to tab content
                    BindingOperations.SetBinding(scaleTransform2,
                                                 ScaleTransform.ScaleXProperty,
                                                 scaleXBinding2);
                    BindingOperations.SetBinding(scaleTransform2,
                                                 ScaleTransform.ScaleYProperty,
                                                 scaleYBinding2);
                                     
                    // adding content to new tab                    
                    newTab.Content = Contact2;
                    dscontentContainer2.Content = Contact3;

                    Contact2.LayoutTransform = scaleTransform;
                    Contact3.LayoutTransform = scaleTransform2;

                    newTab.Visibility = Visibility.Visible;
                    newTab.HorizontalContentAlignment = System.Windows.HorizontalAlignment.Stretch;
                    newTab.VerticalContentAlignment = VerticalAlignment.Stretch;
                    tbContacts.Visibility = Visibility.Visible;
                    tbContacts.Items.Add(newTab);
                    newTab.Focus();

                    // Set focus to the Tab we just opened
                    selectedTVI = getParent(selectedTVI);
                    selectedTVI.Focus();

                    buttonOpenDealerPackageManager.IsEnabled = true;
                    buttonOpenServiceScheduler.IsEnabled = true;
                    pbWatermark.IsEnabled = true;
                    
                    layoutStyles.IsEnabled = true;

                }
            }
        }

        TreeViewItem getParent(TreeViewItem container)
        {
            DependencyObject parent = VisualTreeHelper.GetParent(container);
            while (parent != null && !(parent is TreeViewItem))
            {
                parent = VisualTreeHelper.GetParent(parent);
            }

            return parent as TreeViewItem;
        }

        #endregion

I use a helper to determine The parent of the object that recieved the click so that I can go back and highlight which node was clicked on the tree.

 

Apr 19, 2012 at 3:33 PM

Could us please tell me what is the control u are using for tabs and content area. by the way I like your design its clean and looks really professional.

Apr 19, 2012 at 9:00 PM

Actually I'm using my own custom control if you would like to email me personally I would be willing to share the Style with you and explain how to integrate it. My email is adamtdavis@hotmail.com

And, Thank you for the compliment.

Apr 21, 2012 at 1:10 AM
Edited Apr 21, 2012 at 1:11 AM

You can download an example I created demonstrating my style for the WPF TabControl here: http://www.adamtdavis.com/TabsExample.zip

Apr 21, 2012 at 1:51 AM
Hallo Adam,
Thank u so much for archive u sent me. I will have a closer cool at the control but from what i saw for styling it this is really nice looking and professional tab skinning. If u mind I will try to expand your control so if there are more controls I will try to add some drop-down arrow which will show all opened tabs so one could simply navigate to tab item just by selecting it from the list.



From: [email removed]
To: [email removed]
Date: Fri, 20 Apr 2012 17:10:44 -0700
Subject: Re: Changing Expander styles [NavigationPane:269438]

From: AdamDavis
You can download an example I created demonstraing my style for the WPF TabControl here: http://www.adamtdavis.com/TabsExample.zip
Read the full discussion online.
To add a post to this discussion, reply to this email (NavigationPane@discussions.codeplex.com)
To start a new discussion for this project, email NavigationPane@discussions.codeplex.com
You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe or change your settings on codePlex.com.
Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at codeplex.com
Apr 21, 2012 at 1:16 PM

Here's something else I wrote you might find useful: 

http://vsrpgadget.codeplex.com/

Apr 21, 2012 at 11:37 PM

Nice thing:). takes less clicks to open sollution ;)