Question

I have a treeview in a UI full of rounded corners, so I’d like the treeview to match. Is it possible in xaml to change the border of a treeview to have rounded corners?

I’ve thought about hiding the border and putting the treeview inside a rounded rectangle, but this loses real-estate and seems in-elegant.

Any ideas?

Answer 1

Override the control template for the treeview to change the border. If you have Expression Blend, it can extract the default control template for you easily and then you can simply slap the appropriate radius on the topmost border.

Alternately, take a look at this MSDN article which contains the following treeview control template:

<Style x:Key="{x:Type TreeView}" TargetType="TreeView">
  <Setter Property="OverridesDefaultStyle" Value="True" />
  <Setter Property="SnapsToDevicePixels" Value="True" />
  <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
  <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="TreeView">
        <Border 
          Name="Border" 
          CornerRadius="1" 
          Background="{StaticResource WindowBackgroundBrush}"
          BorderBrush="{StaticResource SolidBorderBrush}"
          BorderThickness="1" >
          <ScrollViewer 
            Focusable="False"
            CanContentScroll="False"
            Padding="4">
            <ItemsPresenter/>
          </ScrollViewer>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Simply change the outer border to have a stronger border radius should achieve what you want.