Posted by: Zeeshan Amjad | August 21, 2010

One small Visual studio WPF designer tip


It is very common in WPF to solve one problem on more than one way. Sometimes there are real advantages and disadvantages of different methods, but it is quite possible that sometimes it is just a matter of style. Here i am going to discuss one very common problem I came across last week. I was suppose to display data of different type. In addition that data is also in hierarchical nature. For hierarchical nature, tree control is a perfect match. But the problem is not the hierarchical data but the top level data.

Fortunately i know in advance the maximum number of types at the top level. For example i have 4 top level, such as “North”, “South”, “East” and “West”. It is neither going to be change, nor going to be populated at run time. We decided to make a tab and display these data in different tabs of that tab control. One more reason to use a tab control is a usability. If we don’t want to display the data of some tab to some specific user, then we can either disable the tab or hide it altogether. So now my user interface has four tabs and each tab has tree control splitter and list box to look a like a windows explorer.

Here is a simple XAML implementation of this mocking user interface.

<Window x:Class="WpfDesigner.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TabControl>
            <TabItem Header="Northern Region">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="3*"/>
                    </Grid.ColumnDefinitions>
                    <TreeView Grid.Column="0" Margin="5"/>
                    <GridSplitter Grid.Column="1" Background="LightGray" Width="5"
                                  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                    <ListView Grid.Column="2" Margin="5"/>
                </Grid>
            </TabItem>
            <TabItem Header="Souther Region">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="3*"/>
                    </Grid.ColumnDefinitions>
                    <TreeView Grid.Column="0" Margin="5"/>
                    <GridSplitter Grid.Column="1" Background="LightGray" Width="5"
                                  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                    <ListView Grid.Column="2" Margin="5"/>
                </Grid>
            </TabItem>
            <TabItem Header="Eastern Region">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="3*"/>
                    </Grid.ColumnDefinitions>
                    <TreeView Grid.Column="0" Margin="5"/>
                    <GridSplitter Grid.Column="1" Background="LightGray" Width="5"
                                  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                    <ListView Grid.Column="2" Margin="5"/>
                </Grid>
            </TabItem>
            <TabItem Header="Sourthern Region">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="3*"/>
                    </Grid.ColumnDefinitions>
                    <TreeView Grid.Column="0" Margin="5"/>
                    <GridSplitter Grid.Column="1" Background="LightGray" Width="5"
                                  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                    <ListView Grid.Column="2" Margin="5"/>
                </Grid>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

Now take a look at the interest part Data Binding. Here we know in advance that the number of tabs is not going to change. In other words the number of tabs are independent of the data. But tree control and list view controls needs data from the data binding. Now here we have two different approaches to do this.

In first method, we are going to set the items source property of tab control with the empty object of binding. By doing this, we can do the data binding with all of of its logical children such as tree view and list view. Here is a piece of code to demonstrate this.

<TabControl ItemsSource="{Binding}">

The other method is to set the data context property of grid, which is a logical parent of our tab control. Here is a piece of code to demonstrate this.

<Grid DataContext="{Binding}">

We can do the data binding of tree view and list view using both techniques. But there is one major difference between these two methods. In first one the Visual studio designer assumed that the number of tabs are going to be decided at run time depends on the binds data. Although we manually declares four tab items, but those are not visible in Visual Studio designer. It means we can’t take an advantage of tools of Visual Studio designer to create or modify our user interface.

On the other hands, we set the data context property of grid, but didn’t do anything with tab control. Now Visual studio designer populate all four tabs and we can do the visual editing all of the tabs.

Advertisements

Responses

  1. […] more Visual Studio designer tip We saw one small Visual Studio designer tip here. Now we are going to see one more tip. We studied few example of Value converter. Lets take a look […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: