Question

I have a WPF WebBrowser control beside a WPF TreeView control. Both have default styles with default properties. I have not changed anything except placing them on my WPF window. If you view the screen shot below you can see the two controls have two different scroll bars. I have no idea why this is happening.

Is there a way to make one control’s scroll bar look like the other, or just default them both to windows styles?

Thanks

Answer 1

To answer your comment:

Is there a way to keep that theme in my resources (my ribbon control uses it) and just remove the scroll bar theme from that tree view control? – Landin Martens Jun 23 at 19:49

Yes.

Option 1

You can override the default style for a control like so:

<Style TargetType="{x:Type TreeView}">
  ...
</Style>

This will change the styling for every TreeView control (assuming the style is defined in your App.xaml dictionary). If you only want to override the style for a few controls, you can name it:

<Style x:Key="XTreeViewStyle"
       TargetType="{x:Type TreeView}">
  ...
</Style>

And the set the style explicitly for those controls (<TreeView Style="{StaticResource XTreeViewStyle}"/>). Or, you can create the style within a specific context, such as a Grid (thus affecting only those controls within the Grid):

<Grid>
  <Grid.Resources>
    <Style TargetType="{x:Type TreeView}">
    </Style>
  </Grid.Resources>
</Grid>

It is my guess that the style which is overriding your scrollbars is not targeting TreeViews specifically… it is probably targeting a control that TreeView inherits from. So, look for a default style which targets TreeView, ItemsControl, Control, FrameworkElement or UIElement. When you find it, you can either give it a name, or move the style into a more limited context.

For example, your styles are probably set up something like this:

<Style TargetType="{x:Type ItemsControl}">
  ...
</Style>

<Style TargetType="{x:Type Ribbon}">
  <Style.Template>
    <ControlTemplate>
      <ItemsControl>
        ...
      </ItemsControl>
    </ControlTemplate>
  </Style.Template>
</Style>

To have the ItemsControl style only affect the Ribbon, you could move the ItemsControl style into the Ribbon’s template:

<Style TargetType="{x:Type Ribbon}">
  <Style.Template>
    <ControlTemplate>
      <ControlTemplate.Resources>
        <Style TargetType="{x:Type ItemsControl}">
          ...
        </Style>
      </ControlTemplate.Resources>
      <ItemsControl>
        ...
      </ItemsControl>
    </ControlTemplate>
  </Style.Template>
</Style>

The exact approach, however, is going to depend on how exactly your styles are setup, and this may be much more complicated then I have suggested. For example, if you have several different styles which all need to use that ItemsControl style, you might use naming and inheritance like this:

<Style TargetType="{x:Type ItemsControl}"
       x:Key="XItemsControlStyle">
  ...
</Style>

<Style TargetType="{x:Type Ribbon}">
  <Style.Template>
    <ControlTemplate>
      <ControlTemplate.Resources>
        <Style TargetType="{x:Type ItemsControl}"
               BasedOn="{StaticResource XItemsControlStyle}">
          ...
        </Style>
      </ControlTemplate.Resources>
      <ItemsControl>
        ...
      </ItemsControl>
    </ControlTemplate>
  </Style.Template>
</Style>

<Style TargetType="{x:Type RibbonItem}">
  <Style.Template>
    <ControlTemplate>
      <ControlTemplate.Resources>
        <Style TargetType="{x:Type ItemsControl}"
               BasedOn="{StaticResource XItemsControlStyle}">
          ...
        </Style>
      </ControlTemplate.Resources>
      <ItemsControl>
        ...
      </ItemsControl>
    </ControlTemplate>
  </Style.Template>
</Style>

Option 2

Set the style for the TreeView explicitly. This will mean finidng the original style for the TreeView (or at least the one you want to use), giving it a name and then setting explicitly on the TreeView you want to style. (See Option 2 for how to do that)

I believe that these links will provide you with default styles:

• TreeView
• ScrollBar
• ScrollViewer