#

GridSplitter Control

 

Microsoft im Community Toolkit ein GridSplitter Control für UWP zur Verfügung. Mit dem GridSplitter Control können Bereich in einem Grid mit einem Schieberegler verschoben werden.

 

Das Control wird über das Nuget Package Microsoft.Toolkit.Uwp.UI.Controls eingebunden.

Anleitung für eine eigene App Page:

 

1)    Man erstellt ein Grid mit mehreren Spalten

2)    Dann fügt man Text und Background Element ein und weist diesen die Grid.Column zu

3)    Man muss mindestens 3 Columns einbauen.

Hinweis: die 2.Column hat eine Breite von 22 Pixel und entspricht dem Grip

4)    Dann fügt man ein control:GridSplitter ein

 

 

Schritt 0)

Den Namespace einbinden

<Page xmlns:UWPToolKit="using:Microsoft.Toolkit.Uwp.UI.Controls"

      x:Class="Demo_Gridsplitter.MainPage"

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      xmlns:local="using:Demo_Gridsplitter"

      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

      xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"

      mc:Ignorable="d">

 

Schritt 1) ein Grid einbauen

        <Grid.ColumnDefinitions>

            <ColumnDefinition MinWidth="200"></ColumnDefinition>

            <ColumnDefinition Width="22" x:Name="Gripper"></ColumnDefinition>

            <ColumnDefinition></ColumnDefinition>

        </Grid.ColumnDefinitions>

 

Schritt 2) Elemente einbauen, die im GridSplitter eingebettet sein sollen

<Border Grid.Column="0" >

            <Border.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="#FFF5F6F2" Offset="0"/>

                    <GradientStop Color="#FFCCFF66" Offset="0.993"/>

                </LinearGradientBrush>

            </Border.Background>

        </Border>

        <Border Grid.Column="3" Background="Azure"></Border>

        <TextBlock Grid.Column="0" FontSize="55"  TextWrapping="Wrap"

                   Text="1this is very long text in cell 1 this is very long text in cell 1 this is very long text in cell 1 this is very long text in cell 1">

        </TextBlock>

        <TextBlock Grid.Column="2" FontSize="55"   TextWrapping="Wrap"

                   Text="2this is very long text in cell 2 this is very long text in cell 2 this is very long text in cell 2 this is very long text in cell 1">

        </TextBlock>

 

 

 

Schritt 3) GridSplitter Code einbauen

GridSplitter Code

        <!--Column Grid Splitter-->

        <controls:GridSplitter Grid.Column="1" Width="11"

                               ResizeBehavior="BasedOnAlignment"

                               ResizeDirection="Columns"

                                Background="Gray" Foreground="White" FontSize="13">

            <controls:GridSplitter.Element>

                <Grid Width="22">

                    <TextBlock HorizontalAlignment="Center" IsHitTestVisible="False" VerticalAlignment="Center"

                               Text="&#xE784;" Foreground="Black" FontFamily="Segoe MDL2 Assets"

                               >

                    </TextBlock>

                </Grid>

            </controls:GridSplitter.Element>

        </controls:GridSplitter>

 

 

UWP Xaml Code in Microsoft ToolKit, Community Toolkit UWP UI Controls für Windows 10 Apps

 

 

 

MainPage.xaml Code

 

<Page xmlns:UWPToolKit="using:Microsoft.Toolkit.Uwp.UI.Controls"

      x:Class="Demo_Gridsplitter.MainPage"

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      xmlns:local="using:Demo_Gridsplitter"

      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

      xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"

      mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

 

        <Grid.ColumnDefinitions>

            <ColumnDefinition MinWidth="200"></ColumnDefinition>

            <ColumnDefinition Width="22" x:Name="Gripper"></ColumnDefinition>

            <ColumnDefinition></ColumnDefinition>

        </Grid.ColumnDefinitions>

 

        <Border Grid.Column="0" >

            <Border.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="#FFF5F6F2" Offset="0"/>

                    <GradientStop Color="#FFCCFF66" Offset="0.993"/>

                </LinearGradientBrush>

            </Border.Background>

        </Border>

        <Border Grid.Column="3" Background="Azure"></Border>

        <TextBlock Grid.Column="0" FontSize="55"  TextWrapping="Wrap"

                   Text="1this is very long text in cell 1 this is very long text in cell 1 this is very long text in cell 1 this is very long text in cell 1">

        </TextBlock>

        <TextBlock Grid.Column="2" FontSize="55"   TextWrapping="Wrap"

                   Text="2this is very long text in cell 2 this is very long text in cell 2 this is very long text in cell 2 this is very long text in cell 1">

        </TextBlock>

 

        <!--Column Grid Splitter-->

        <controls:GridSplitter Grid.Column="1" Width="11"

                               ResizeBehavior="BasedOnAlignment"

                               ResizeDirection="Columns"

                              

                              

                               Background="Gray" Foreground="White" FontSize="13">

            <controls:GridSplitter.Element>

                <Grid Width="22">

                    <TextBlock HorizontalAlignment="Center" IsHitTestVisible="False" VerticalAlignment="Center"

                               Text="&#xE784;" Foreground="Black" FontFamily="Segoe MDL2 Assets"

                               >

                    </TextBlock>

                </Grid>

            </controls:GridSplitter.Element>

        </controls:GridSplitter>

 

    </Grid>

</Page>  

 

 

 

Mobile

.

0123movie.net