Preview in UWP Grid Splitter (SfGridSplitter)
10 May 20213 minutes to read
SfGridSplitter provides a way to preview the redistributed row or columns before it is done.
Enable preview
Preview for the redistributed rows or columns can be enabled using the property ShowsPreview.
<Grid>
<Grid.RowDefinitions>
<RowDefinition MinHeight="50"/>
<RowDefinition Height="15"/>
<RowDefinition MinHeight="50"/>
</Grid.RowDefinitions>
<Border Background="LightCoral">
<Path Fill="White" Stretch="Uniform" Margin="20"
Data="M14.911999,36.994997C14.911999,36.994997 20.409431,39.888113 31.999999,39.888112 43.590566,39.888113 49.087998,36.994997 49.087998,36.994997 49.087998,45.05326 43.336564,54.082996 31.999999,54.082996 20.663433,54.082996 14.911999,45.05326 14.911999,36.994997z M41.99056,22.008999C44.746226,22.008999 49.482999,25.443786 49.482999,27.004935 49.482999,28.566084 44.746226,27.004935 41.99056,27.004935 39.234794,27.004935 36.996001,28.760077 36.996001,27.004935 36.996001,25.248492 39.234794,22.008999 41.99056,22.008999z M22.00962,22.008999C24.765454,22.008999 27.005,25.248492 27.005,27.004935 27.005,28.760077 24.765454,27.004935 22.00962,27.004935 19.253886,27.004935 14.517,28.566084 14.516999,27.004935 14.517,25.443786 19.253886,22.008999 22.00962,22.008999z M31.999999,4.9947777C17.11,4.9947777 4.99545,17.109299 4.99545,31.999999 4.99545,46.890699 17.11,59.005199 31.999999,59.005199 46.89,59.005199 59.0052,46.890699 59.0052,31.999999 59.0052,17.109299 46.89,4.9947777 31.999999,4.9947777z M31.999999,0C49.6732,0 64.000001,14.326799 64.000001,31.999999 64.000001,49.673199 49.6732,63.999998 31.999999,63.999998 14.3268,63.999998 0,49.673199 0,31.999999 0,14.326799 14.3268,0 31.999999,0z"/>
</Border>
<input:SfGridSplitter Grid.Row="1" ShowsPreview="true" x:Name="gridSplitter"/>
<Border Background="LightBlue" Grid.Row="2">
<Path Fill="White" Stretch="Uniform" Margin="20"
Data="M49.041,37.888998C46.583956,45.443701 40.718889,48.415001 32.000286,48.415001 27.0004,48.415001 22.603999,47.9606 22.604,44.614201 22.603999,41.767899 27.038799,44.0765 32.000286,44.0765 39.541216,44.0765 44.432205,44.4202 49.041,37.888998z M31.920897,26.381837C31.152713,26.381837,30.415843,26.489504,29.733346,26.686669L29.536378,26.747936 29.525844,27.284274C29.255528,34.056179 24.868841,36.202001 20.9238,36.202001 17.615057,36.202001 12.370603,34.779371 10.520255,29.166882L10.460608,28.966284 10.250998,28.948714C8.9134722,28.829189,7.419548,28.619898,5.9481936,28.260834L5.5973196,28.171415 5.5229349,28.820141C5.4319,29.713738 5.3852587,30.620273 5.3852587,31.537498 5.3852587,46.213104 17.325372,58.15193 32.000513,58.15193 46.675554,58.15193 58.615786,46.213104 58.615786,31.537498 58.615786,30.620273 58.569143,29.713738 58.478109,28.820142L58.403692,28.171154 58.051794,28.260834C56.580442,28.619898,55.086519,28.829189,53.748995,28.948714L53.543726,28.96592 53.480742,29.166883C51.630381,34.779371 46.385902,36.202001 43.077257,36.202001 39.132236,36.202001 34.745478,34.056179 34.475158,27.284274L34.465663,26.800868 34.397585,26.776595C33.63586,26.522463,32.798822,26.381837,31.920897,26.381837z M32.000513,4.9231281C20.30626,4.9231281,10.348776,12.504359,6.7860508,23.010435L6.6705694,23.365368 7.1620426,23.494185C7.9243679,23.675234,8.7222767,23.811754,9.508605,23.913207L9.8758688,23.955598 9.8849068,23.863807C10.149009,21.776664 11.976937,21.691 20.9238,21.691 24.058201,21.691 26.212001,21.901933 27.582201,22.622825L27.783659,22.737643 28.232927,22.582504C29.383512,22.213504 30.625788,22.011999 31.920897,22.011999 33.401072,22.011999 34.812228,22.275189 36.096364,22.750804L36.15559,22.774247 36.17085,22.764043C37.523363,21.929124 39.746655,21.691 43.077257,21.691 52.024075,21.691 53.851995,21.776664 54.116095,23.863807L54.125051,23.954759 54.493399,23.912269C55.279299,23.810934,56.07667,23.674575,56.838507,23.493682L57.330282,23.364805 57.214983,23.010435C53.652227,12.504359,43.694687,4.9231281,32.000513,4.9231281z M32.000513,0C45.88052,0,57.666513,8.9660902,61.881887,21.422423L61.997049,21.777128 62.204645,21.825213C62.736212,21.975394 63.221319,22.304366 63.561129,22.792625 64.286856,23.840112 64.089018,25.253878 63.141394,26.063838L63.073172,26.116389 63.1756,26.734601C63.414896,28.300633 63.539,29.904572 63.539,31.537498 63.539,48.955387 49.418562,63.074999 32.000513,63.074999 14.582464,63.074999 0.46199989,48.955387 0.46199989,31.537498 0.46199989,29.904572 0.58610535,28.300633 0.8253994,26.7346L0.9277153,26.117068 0.85861588,26.063837C-0.088972092,25.253878 -0.28686905,23.840112 0.43883705,22.792625 0.7769413,22.304366 1.2604656,21.975394 1.7913322,21.825213L2.0043793,21.775813 2.1191158,21.422423C6.3344965,8.9660902,18.120505,0,32.000513,0z"/>
</Border>
</Grid>gridSplitter.ShowsPreview = true;gridSplitter.ShowsPreview = True
Style preview
The previewer can be customized using PreviewStyle property.
<Grid>
<Grid.RowDefinitions>
<RowDefinition MinHeight="50"/>
<RowDefinition Height="15"/>
<RowDefinition MinHeight="50"/>
</Grid.RowDefinitions>
<Border Background="LightCoral">
<Path Fill="White" Stretch="Uniform" Margin="20"
Data="M14.911999,36.994997C14.911999,36.994997 20.409431,39.888113 31.999999,39.888112 43.590566,39.888113 49.087998,36.994997 49.087998,36.994997 49.087998,45.05326 43.336564,54.082996 31.999999,54.082996 20.663433,54.082996 14.911999,45.05326 14.911999,36.994997z M41.99056,22.008999C44.746226,22.008999 49.482999,25.443786 49.482999,27.004935 49.482999,28.566084 44.746226,27.004935 41.99056,27.004935 39.234794,27.004935 36.996001,28.760077 36.996001,27.004935 36.996001,25.248492 39.234794,22.008999 41.99056,22.008999z M22.00962,22.008999C24.765454,22.008999 27.005,25.248492 27.005,27.004935 27.005,28.760077 24.765454,27.004935 22.00962,27.004935 19.253886,27.004935 14.517,28.566084 14.516999,27.004935 14.517,25.443786 19.253886,22.008999 22.00962,22.008999z M31.999999,4.9947777C17.11,4.9947777 4.99545,17.109299 4.99545,31.999999 4.99545,46.890699 17.11,59.005199 31.999999,59.005199 46.89,59.005199 59.0052,46.890699 59.0052,31.999999 59.0052,17.109299 46.89,4.9947777 31.999999,4.9947777z M31.999999,0C49.6732,0 64.000001,14.326799 64.000001,31.999999 64.000001,49.673199 49.6732,63.999998 31.999999,63.999998 14.3268,63.999998 0,49.673199 0,31.999999 0,14.326799 14.3268,0 31.999999,0z"/>
</Border>
<input:SfGridSplitter Grid.Row="1" ShowsPreview="true" x:Name="gridSplitter">
<input:SfGridSplitter.PreviewStyle>
<Style TargetType="Control">
<Setter Property="Background" Value="Red"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Control">
<Grid x:Name="Root" Opacity="0.5">
<Rectangle Fill="{TemplateBinding Background}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</input:SfGridSplitter.PreviewStyle>
</input:SfGridSplitter>
<Border Background="LightBlue" Grid.Row="2">
<Path Fill="White" Stretch="Uniform" Margin="20"
Data="M49.041,37.888998C46.583956,45.443701 40.718889,48.415001 32.000286,48.415001 27.0004,48.415001 22.603999,47.9606 22.604,44.614201 22.603999,41.767899 27.038799,44.0765 32.000286,44.0765 39.541216,44.0765 44.432205,44.4202 49.041,37.888998z M31.920897,26.381837C31.152713,26.381837,30.415843,26.489504,29.733346,26.686669L29.536378,26.747936 29.525844,27.284274C29.255528,34.056179 24.868841,36.202001 20.9238,36.202001 17.615057,36.202001 12.370603,34.779371 10.520255,29.166882L10.460608,28.966284 10.250998,28.948714C8.9134722,28.829189,7.419548,28.619898,5.9481936,28.260834L5.5973196,28.171415 5.5229349,28.820141C5.4319,29.713738 5.3852587,30.620273 5.3852587,31.537498 5.3852587,46.213104 17.325372,58.15193 32.000513,58.15193 46.675554,58.15193 58.615786,46.213104 58.615786,31.537498 58.615786,30.620273 58.569143,29.713738 58.478109,28.820142L58.403692,28.171154 58.051794,28.260834C56.580442,28.619898,55.086519,28.829189,53.748995,28.948714L53.543726,28.96592 53.480742,29.166883C51.630381,34.779371 46.385902,36.202001 43.077257,36.202001 39.132236,36.202001 34.745478,34.056179 34.475158,27.284274L34.465663,26.800868 34.397585,26.776595C33.63586,26.522463,32.798822,26.381837,31.920897,26.381837z M32.000513,4.9231281C20.30626,4.9231281,10.348776,12.504359,6.7860508,23.010435L6.6705694,23.365368 7.1620426,23.494185C7.9243679,23.675234,8.7222767,23.811754,9.508605,23.913207L9.8758688,23.955598 9.8849068,23.863807C10.149009,21.776664 11.976937,21.691 20.9238,21.691 24.058201,21.691 26.212001,21.901933 27.582201,22.622825L27.783659,22.737643 28.232927,22.582504C29.383512,22.213504 30.625788,22.011999 31.920897,22.011999 33.401072,22.011999 34.812228,22.275189 36.096364,22.750804L36.15559,22.774247 36.17085,22.764043C37.523363,21.929124 39.746655,21.691 43.077257,21.691 52.024075,21.691 53.851995,21.776664 54.116095,23.863807L54.125051,23.954759 54.493399,23.912269C55.279299,23.810934,56.07667,23.674575,56.838507,23.493682L57.330282,23.364805 57.214983,23.010435C53.652227,12.504359,43.694687,4.9231281,32.000513,4.9231281z M32.000513,0C45.88052,0,57.666513,8.9660902,61.881887,21.422423L61.997049,21.777128 62.204645,21.825213C62.736212,21.975394 63.221319,22.304366 63.561129,22.792625 64.286856,23.840112 64.089018,25.253878 63.141394,26.063838L63.073172,26.116389 63.1756,26.734601C63.414896,28.300633 63.539,29.904572 63.539,31.537498 63.539,48.955387 49.418562,63.074999 32.000513,63.074999 14.582464,63.074999 0.46199989,48.955387 0.46199989,31.537498 0.46199989,29.904572 0.58610535,28.300633 0.8253994,26.7346L0.9277153,26.117068 0.85861588,26.063837C-0.088972092,25.253878 -0.28686905,23.840112 0.43883705,22.792625 0.7769413,22.304366 1.2604656,21.975394 1.7913322,21.825213L2.0043793,21.775813 2.1191158,21.422423C6.3344965,8.9660902,18.120505,0,32.000513,0z"/>
</Border>
</Grid>