单击TextBlock打开Expander对象WPF

Question

I'm not so good at XAML, and I'm trying to make something like this:

_{(source: deviantart.net )}

I want a few options (The orange ones) and then when I click the orange ones, they expand and show further options.

Here's the little code I have:

<ListView Background="#585858" Width="300" HorizontalAlignment="Left">
    <ListViewItem>
        <Grid Margin="15,5">
            <TextBlock Foreground="#FFABADB3" Text="MenuTitle" FontSize="20" Grid.Row="0"/>
            <Expander Grid.Row="1">
            </Expander>
        </Grid>
    </ListViewItem>
</ListView>

But it doesn't really work as I want it to. The Textblock and the Expander goes on the same line.

Here's what my code looks like:

http://i.imgur.com/dbtNPUv.png

If anyone can guide me in the right direction I'd be really glad! Thanks in advance and happy holidays :)

Answer 1

Put the TextBlock in the Expander Header

<ListView Background="#585858" Width="300" HorizontalAlignment="Left">
 <ListViewItem>
   <Grid Margin="15,5">
     <Expander Grid.Row="1">
      <Expander.Header>
        <TextBlock Foreground="#FFABADB3" Text="MenuTitle" FontSize="20" Grid.Row="0"/>
      </Expander.Header>   
     </Expander>
   </Grid>
 </ListViewItem>
</ListView>

But if you want the design from the picture,you will have a lot more work to do. You will need to "retemplate" the ListViewItem and the Expander . Default templates are far from the one on the picture.