Silverlight GridSplitter Kontrol


This article is compatible with the latest version of Silverlight.
Introduction
To use the GridSplitter you should be familiar with the Grid control. It is a control that allows the user to resize dynamically the width or height of the Grid cells.
See also:
Grid Article
Overview
The following example demonstrates how to use the GridSplitter:
We want to have two cells whose width can be redistributed. The blue line can be moved left or right when clicking on it, holding the mouse button and dragging. Thus the neighbor cells can be resized.
The XAML code:
<UserControl
    xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 
    x:Class="GridSplitter2.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" ShowGridLines="True" Background="White" Width="400"Height="300">
        <Grid.RowDefinitions>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <basics:GridSplitter x:Name="grsplSplitter" Grid.Row="0" Grid.Column="1"VerticalAlignment="Stretch" HorizontalAlignment="Center" Background="Aqua"Width="5"></basics:GridSplitter>
    </Grid>
</UserControl>
Note: you can use a Brush object as a Background property.
Note that the GridSplitter is located in the middle column but not between the columns. It has its own size and the middle column is marked with Width="Auto" to take exactly the width of the GridSplitter. You can add same space around the splitter setting different width of the column holding it. For example:
<Grid.ColumnDefinitions>
    <ColumnDefinition />
    <ColumnDefinition Width="25"/>
    <ColumnDefinition />
</Grid.ColumnDefinitions>

Here the MinWidth and MaxWidth of the Grid columns become useful. You can restrict the GridSplitter by setting for example the following:
<Grid.ColumnDefinitions>
    <ColumnDefinition MinWidth="50" MaxWidth="250" />
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition />
</Grid.ColumnDefinitions>
Thus the splitter will continue to work in the same way but you will be able to move it within the width of column – in the above example within 50 and 250 pixels.
You can use the same technique to resize the Height of Grid rows. I won’t describe it in details. I’ll give just an example:

<UserControl
    xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 
    x:Class="GridSplitter2.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" ShowGridLines="True" Background="White" Width="400"Height="300">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <basics:GridSplitter x:Name="grsplSplitter" Grid.Row="1" Grid.Column="0"VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="Aqua"Height="5"></basics:GridSplitter>
    </Grid>
</UserControl>
You can read more about the GridSplitter properties and the dependencies between them at: http://msdn2.microsoft.com/en-us/library/system.windows.controls.gridsplitter(VS.95).aspx
One useful property is the ShowsPreview. When it is set to True and you are moving the mouse only a preview is shown and the splitter is not moving. When the left button is released then the splitter moves.

<basics:GridSplitter ShowsPreview="True" x:Name="grsplSplitter" Grid.Row="0"Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center"Background="Aqua" Width="5"></basics:GridSplitter>
You can customize the Style of the preview using the PreviewStyle property.
Conclusion
This article is just a brief description of the key features of the GridSplitter control. It targets the developer who has just started with  the Silverlight controls. Any comments are welcome.
Reference

Alıntı : http://www.silverlightshow.net/items/Using-the-GridSplitter-control-in-Silverlight-2-Beta-1.aspx

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Ankara Web Tasarım

Ankara Web Tasarım ile Size Özel Çözümler Ankara Web Tasarım size neler vadeder hiç düşündünüz mü? Profesyonel çözümler, kaliteli hizmetler ve çok daha fazlasını web tasarım'ları sayesinde tercih edebileceğinizi biliyor muydunuz? O halde web sitenizin daha profesyonel şekilde tasarlanması adına kaliteli web tasarım hizmeti almaya hazır olun. Hızlı, kaliteli ve sorunsuz süreç için size neler vadettiğimizi değerlendirmenin tam zamanı! Ankara Web Tasarım Kimdir? Ankara Web Tasarım , web sitenize sahip olmanızı sağlayan profesyonellerdir. Kodlama, tema düzenleme, site oluşturma, içerik girişi ve altyapı konusundaki bütün hususlarda web site tasarımcıları görev almaktadır. Bu sayede sunulan hizmetin daha kaliteli olması söz konusudur. Siz de web sitenizi tasarlarken profesyonel hizmetten faydalanmak mı istiyorsunuz? O halde alanında uzman web site tasarımcısı ile çalışmaya başlamalısınız. Web Site Tasarımcısı Ne Tür Hizmetler Sunar? Tasarım web sitesinin hem görsel hem de altyapısal an...
Devamı

Styling Microsoft’s WPF datagrid

Resim
Microsoft’s  WPF datagrid  has a lot of properties and styles you can tweak to get it looking right (if you are a designer). Below, find my cheat sheet to styling the grid.   It is not 100% comprehensive but it gets you far and has a few very useful tips & gotchas.  At the highest level in the DataGrid , you can change the look & feel by setting some of these: Property Type Values Default AlternatingRowBackground Brush Any Brush Null Background Brush Any Brush Theme default ColumnHeaderHeight Double 0 to any positive double NaN ColumnHeaderStyle Style Any Style Null ColumnWidth DataGridLength 0 to any positive double, Auto, *, SizeToCells, SizeToHeader SizeToHeader HeadersVisibility DataGridHeadersVisibility All, Row, Column, None All MaxColumnWidth Double 0 to any positive double Positive Infinity MaxRowHeight Double 0 to any positive double Positive Infinity MinColumnWidth Double 0 to any positive double 20 MinRowHeight Double 0 ...
Devamı

String Format for Double [C#]

http://www.csharp-examples.net/examples/ The following examples show how to format float numbers to string in C#. You can use static method String.Format or instance methods double.ToString and float.ToString . Digits after decimal point This example formats double to string with fixed number of decimal places . For two decimal places use pattern „ 0.00 “. If a float number has less decimal places, the rest digits on the right will be zeroes. If it has more decimal places, the number will be rounded. [C#] // just two decimal places String .Format( "{0:0.00}" , 123.4567); // "123.46" String .Format( "{0:0.00}" , 123.4); // "123.40" String .Format( "{0:0.00}" , 123.0); // "123.00" Next example formats double to string with floating number of decimal places . E.g. for maximal two decimal places use pattern „ 0.## “. [C#] // max. two decimal places String .Format( "{0:0.##}" , 1...
Devamı