views:

34

answers:

1

Good day,

First question here and just learning WPF, so please be gentle...

I'm trying to put together a TreeView whose items fire Commands. I'm sure there are many ways to accomplish this, but my approach has been to create a Style for the TreeViewItem with a ControlTemplate that incorporates a RadioButton for its Command functionality.

. . .
<ToggleButton x:Name="Expander"
  Style="{StaticResource ExpandCollapseToggleStyle}" Grid.Column="0" Grid.Row="0" 
  IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
  ClickMode="Press"/>
  <RadioButton Style="{StaticResource TreeElementStyle}"
    Grid.Row="0" Grid.Column="1" Command="{TemplateBinding ???}">
    <ContentPresenter x:Name="PART_Header" ContentSource="Header"/>
  </RadioButton>
  <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>
</Grid>
. . .

Regardless, I have tree visually looking fine but cannot fathom how to bind my Command to the incorporated RadioButton, and am lost in a quagmire of template confusion.

. . .
<TreeView>
  <TreeViewItem Header="Enterprise">
    <TreeViewItem Header="General Settings"
      Command="{Binding Path=GeneralSettingsCommand}"/>
. . .

I would provide more code, but I assume at this point, answers will be more along the lines of, "Dude, you're way off track. Read about blah first", or "a Button is completely unnecessary", or "you should be using an ItemTemplate instead" or..." or "just give up already" ;)

A: 

Thank you Meleak; good information.

However, I found a very simple solution - for my purposes anyway.

The whole trick is to provide the Button as the TreeViewItem.Header rather than incorporate it into TreeViewItem's ControlTemplate.

If I provide the Button as the TreeViewItem.Header, I can easily set the Command on it and style it appropriately.

Here is example:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
  <Page.Resources>
    <Style TargetType="{x:Type RadioButton}">
      <Setter Property="GroupName" Value="TreeGroup"/>
      <Setter Property="Focusable" Value="False"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type RadioButton}">
            <Grid >
              <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
              </Grid.ColumnDefinitions>
              <!-- beginnings of a folder icon -->
              <Border Background="Black" VerticalAlignment="Center" Width="12" Height="10" CornerRadius="2">
                <Border Background="DarkGoldenrod" Margin="1"/>
              </Border>
              <Border Grid.Column="1" Margin="4,0,0,0" Padding="1,2,4,2" Name="Selection" Background="Transparent">
                <ContentPresenter />
              </Border>
            </Grid>
            <ControlTemplate.Triggers>
              <Trigger Property="IsChecked" Value="True">
                <Setter TargetName="Selection" Property="Background" Value="DarkBlue"/>
                <Setter Property="Foreground" Value="White"/>
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Page.Resources>
  <Grid>  
     <TreeView Width="220" Focusable="False">
      <TreeViewItem IsExpanded="True">
        <TreeViewItem.Header>
          <RadioButton Content="Enterprise"/>
        </TreeViewItem.Header>
        <TreeViewItem>
          <TreeViewItem.Header>
            <RadioButton Content="Settings" Command="{Binding SettingsCommand}"/>
          </TreeViewItem.Header>
        </TreeViewItem>
        <TreeViewItem>
          <TreeViewItem.Header>
            <RadioButton Content="Statistics" Command="{Binding StatisticsCommand}"/>
          </TreeViewItem.Header>
        </TreeViewItem>
      </TreeViewItem>
    </TreeView>
  </Grid>
</Page>
zullo
Good work :) Deleting my answer to clean up the thread
Meleak