[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] GridSplitter 엘리먼트 : 그리드 분리자 만들기

■ GridSplitter 엘리먼트를 사용해 그리드 분리자를 만드는 방법을 보여준다.

※ 이 예제 코드에서 사용된 GridSplitter 엘리먼트는 CommunityToolkit.WinUI.Controls.Sizers 누겟(버전 : 8.0.240109)을 참조한다.
※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:control="using:CommunityToolkit.WinUI.Controls"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Page.Resources>
        <Style TargetType="Border">
            <Setter Property="BorderThickness" Value="1 1 0 0" />
            <Setter Property="Padding"         Value="15"      />
            <Setter Property="BorderBrush"     Value="{ThemeResource SystemControlHighlightChromeHighBrush}" />
        </Style>
        <Style TargetType="TextBlock">
            <Setter Property="TextWrapping" Value="Wrap" />
        </Style>
    </Page.Resources>
    <Grid Name="RootGrid"
        Margin="30"
        BorderThickness="0 0 1 1"
        BorderBrush="{ThemeResource SystemControlHighlightChromeHighBrush}">
        <Grid.RowDefinitions>
            <RowDefinition
                MinHeight="100"
                MaxHeight="300" />
            <RowDefinition Height="200" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition
                MinWidth="100"
                MaxWidth="300" />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="Full">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="600" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="Small">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="RootGrid.Padding"  Value="10" />
                        <Setter Target="RootGrid.FontSize" Value="12" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border Grid.Row="0" Grid.Column="0">
            <TextBlock Text="This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect RowDefinition MinHeight='100'" />
        </Border>
        <Border Grid.Row="0" Grid.Column="1">
            <TextBlock Text="This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect" />
        </Border>
        <Border Grid.Row="0" Grid.Column="2">
            <TextBlock Text="This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect" />
        </Border>
        <Border Grid.Row="1" Grid.Column="0">
            <TextBlock Text="This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect" />
        </Border>
        <Border Grid.Row="1" Grid.Column="1">
            <TextBlock Text="This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect" />
        </Border>
        <Border Grid.Row="1" Grid.Column="2">
            <TextBlock Text="This text to simulate the resizing feature of the Grid Splitter Control, try to move the splitter to see the effect" />
        </Border>
        <control:GridSplitter Grid.Row="0" Grid.Column="1"
            Width="16"
            HorizontalAlignment="Left"
            ResizeBehavior="BasedOnAlignment"
            ResizeDirection="Auto">
            <control:GridSplitter.RenderTransform>
                <TranslateTransform X="-7" />
            </control:GridSplitter.RenderTransform>
        </control:GridSplitter>
        <control:GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"
            VerticalAlignment="Top"
            Height="16">
            <control:GridSplitter.RenderTransform>
                <TranslateTransform Y="-7" />
            </control:GridSplitter.RenderTransform>
        </control:GridSplitter>
    </Grid>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

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

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

xmlns:control="using:CommunityToolkit.WinUI.Controls"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Page.Resources>

</Style>

</Style>

</Page.Resources>

<Grid Name="RootGrid"

Margin="30"

BorderThickness="0 0 1 1"

BorderBrush="{ThemeResource SystemControlHighlightChromeHighBrush}">

<Grid.RowDefinitions>

<RowDefinition

MinHeight="100"

MaxHeight="300" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition

MinWidth="100"

MaxWidth="300" />

</Grid.ColumnDefinitions>

<VisualStateManager.VisualStateGroups>

<VisualState.StateTriggers>

</VisualState.StateTriggers>

</VisualState>

<VisualState.StateTriggers>

</VisualState.StateTriggers>

<VisualState.Setters>

</VisualState.Setters>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

</Border>

</Border>

</Border>

</Border>

</Border>

</Border>

<control:GridSplitter Grid.Row="0" Grid.Column="1"

Width="16"

HorizontalAlignment="Left"

ResizeBehavior="BasedOnAlignment"

ResizeDirection="Auto">

<control:GridSplitter.RenderTransform>

</control:GridSplitter.RenderTransform>

</control:GridSplitter>

<control:GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"

VerticalAlignment="Top"

Height="16">

<control:GridSplitter.RenderTransform>

</control:GridSplitter.RenderTransform>

</control:GridSplitter>

</Grid>

</Page>

TestProject.zip