01 czerwca 2011

WPF i pewna czwórka (Grid, DockPanel, TreeView i GridSplitter)

Daily WPF


Rozpoczynając pracę nad moją pierwszą Non-HelloWorld aplikacją w WPF zderzyłem się z prostym problemem. Chciałem uzyskać następujący layout:
  • Po lewej drzewko (TreeView) wypełnia całą wolną przestrzeń
  • Po prawej jakiś panel (StackPanel), który wypełnia całą wolną przestrzeń
  • Splitter pomiędzy drzewkiem i panelem (GridSplitter)
  • Na górze menu
  • Na dole Status bar
I niestety chwilę mi to zajeło zanim uzyskałem zadowalający efekt.





Kod zamieszczam poniżej. Do eksperymentów polecam narzędzie kaxaml, jest to bardzo sympatyczny edytor XAMLa.

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <DockPanel>
        <StatusBar Width="Auto" Height="25" DockPanel.Dock="Bottom">
            <TextBlock>Status bar</TextBlock>
        </StatusBar>
        <Menu DockPanel.Dock="Top" IsMainMenu="True">
            <MenuItem Header="_Menu" >
                <MenuItem Header="Open" />
                <Separator />
                <MenuItem Header="Exit" />
            </MenuItem>
           
            <MenuItem Header="_Help" >
                <MenuItem Header="About" />
            </MenuItem>
        </Menu>
        <ToolBar Width="Auto" Height="35" DockPanel.Dock="Top">
            <StackPanel Orientation="Horizontal" >
                <Button >
                    TOOLBAR
                </Button>
            </StackPanel>
        </ToolBar>
        <Grid DockPanel.Dock="Left">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200" />
                <ColumnDefinition Width="5"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            
            <Grid.RowDefinitions>
                <RowDefinition />
            </Grid.RowDefinitions>

            <TreeView Grid.Row="0" Grid.Column="0"  MinWidth="150" >
                <TreeViewItem Header="Polska">
                   <TreeViewItem Header="Mazowieckie">
                      <TreeViewItem Header="Warszawa"></TreeViewItem>
                      <TreeViewItem Header="Piaseczno"></TreeViewItem>
                      <TreeViewItem Header="Mysiadło"></TreeViewItem>
                   </TreeViewItem>
                </TreeViewItem>

            </TreeView>
            
            <GridSplitter Grid.Row="0" Grid.Column="1" Width="5"  HorizontalAlignment="Stretch"  />
            
            <StackPanel Grid.Row="0" Grid.Column="2" HorizontalAlignment="Left" Width="Auto" Height="Auto" >
              <TextBlock Text="Panel" /> 
            </StackPanel>
        </Grid>
    </DockPanel>
  
</Page>

Brak komentarzy:

Prześlij komentarz

Uwaga: tylko uczestnik tego bloga może przesyłać komentarze.