wpf
"절반 공백"디자인 원리

.NET Framework ASP.NET C# Language C++ Design patterns Entity Framework SQL Microsoft SQL Server uwp Visual Basic .NET Language
수색…


소개

컨트롤을 배치 할 때 마진 및 패딩의 특정 값을 하드 코딩하여 원하는 레이아웃에 맞게 만들 수 있습니다. 그러나 이러한 값을 하드 코딩하면 유지 관리 비용이 훨씬 높아집니다. 레이아웃이 변경되면 사소한 것으로 간주 될 수있는 부분에서 이러한 값을 수정해야합니다.

이 설계 원칙은 레이아웃을 다른 방식으로 생각함으로써 레이아웃 유지 관리 비용을 줄입니다.

문제와 해결책의 데모

예를 들어, 다음과 같이 3 개의 섹션이있는 화면을 상상해보십시오. 원하는 화면 레이아웃

파란 상자에는 4,4,0,0의 여백이 주어질 수 있습니다. 초록색 상자에는 4,4,4,0의 여백이 주어질 수 있습니다. 보라색 상자 여백은 4,4,4,4입니다. XAML은 다음과 같습니다 (레이아웃을 달성하기 위해 격자를 사용하고 있지만 레이아웃을 얻는 방법에 관계없이이 디자인 원칙이 적용됩니다). 

<UserControl x:Class="WpfApplication5.UserControl1HardCoded"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Border Grid.Column="0" Grid.Row="0" Margin="4,4,0,0" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/>
    <Border Grid.Column="1" Grid.Row="0" Margin="4,4,4,0" Background="Green" BorderBrush="DarkGreen" BorderThickness="5"/>
    <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Margin="4,4,4,4" Background="MediumPurple" BorderBrush="Purple" BorderThickness="5"/>
</Grid>
</UserControl>

이제 파란색 상자의 왼쪽에 녹색 상자를 놓기 위해 레이아웃을 변경하려고한다고 상상해보십시오. 간단해야한다, 안 그래? 우리가 그 상자를 움직일 때를 제외하고는 이제 마진을 고쳐야합니다. 파란색 상자의 여백을 0,4,4,0으로 변경할 수 있습니다. 또는 파란색을 4,4,4,0으로, 녹색을 4,4,0,0으로 변경할 수 있습니다. XAML은 다음과 같습니다. 

<UserControl x:Class="WpfApplication5.UserControl2HardCoded"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Border Grid.Column="1" Grid.Row="0" Margin="4,4,4,0" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/>
        <Border Grid.Column="0" Grid.Row="0" Margin="4,4,0,0" Background="Green" BorderBrush="DarkGreen" BorderThickness="5"/>
        <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Margin="4,4,4,4" Background="MediumPurple" BorderBrush="Purple" BorderThickness="5"/>
    </Grid>
</UserControl>

보라색 상자를 맨 위에 놓자. 따라서 파란색의 마진은 4,0,4,4가됩니다. 녹색은 4,0,0,4가됩니다. 

<UserControl x:Class="WpfApplication5.UserControl3HardCoded"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="2*"/>
        </Grid.RowDefinitions>

        <Border Grid.Column="1" Grid.Row="1" Margin="4,0,4,4" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/>
        <Border Grid.Column="0" Grid.Row="1" Margin="4,0,0,4" Background="Green" BorderBrush="DarkGreen" BorderThickness="5"/>
        <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Margin="4,4,4,4" Background="MediumPurple" BorderBrush="Purple" BorderThickness="5"/>
    </Grid>
</UserControl>

우리가이 값들을 전혀 조정할 필요가 없도록 주변을 움직일 수 있다면 좋지 않을까요? 이는 공백을 다른 방식으로 생각함으로써 성취 될 수 있습니다. 모든 공백을 하나의 컨트롤이나 다른 컨트롤에 할당하는 대신 각 상자에 할당되는 공백의 절반을 상상해보십시오 (내 그림은 크기가 확 대되지 않습니다 - 점선은 상자 가장자리와 그 이웃 사이의 중간에 있어야합니다) .

여기에 이미지 설명을 입력하십시오.

따라서 파란 상자의 마진은 2,2,2,2입니다. 초록색 상자의 마진은 2,2,2,2입니다. 보라색 상자의 여백은 2,2,2,2입니다. 그리고 그들이 수납되어있는 용기는 2,2,2,2의 패딩 (마진이 아님)이 주어진다. XAML은 다음과 같습니다. 

<UserControl x:Class="WpfApplication5.UserControl1HalfTheWhitespace"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
             Padding="2,2,2,2">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Border Grid.Column="0" Grid.Row="0" Margin="2,2,2,2" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/>
        <Border Grid.Column="1" Grid.Row="0" Margin="2,2,2,2" Background="Green" BorderBrush="DarkGreen" BorderThickness="5"/>
        <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Margin="2,2,2,2" Background="MediumPurple" BorderBrush="Purple" BorderThickness="5"/>
    </Grid>
</UserControl>

이제 이전과 같은 방식으로 상자를 움직여 봅시다 ... 파란색 상자의 왼쪽에 녹색 상자를 놓으십시오. 좋아됐다. 패딩이나 여백을 변경할 필요가 없었습니다. XAML은 다음과 같습니다. 

<UserControl x:Class="WpfApplication5.UserControl2HalfTheWhitespace"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
             Padding="2,2,2,2">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Border Grid.Column="1" Grid.Row="0" Margin="2,2,2,2" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/>
        <Border Grid.Column="0" Grid.Row="0" Margin="2,2,2,2" Background="Green" BorderBrush="DarkGreen" BorderThickness="5"/>
        <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Margin="2,2,2,2" Background="MediumPurple" BorderBrush="Purple" BorderThickness="5"/>
    </Grid>
</UserControl>

보라색 상자를 맨 위에 놓자. 좋아됐다. 패딩이나 여백을 변경할 필요가 없었습니다. XAML은 다음과 같습니다. 

<UserControl x:Class="WpfApplication5.UserControl3HalfTheWhitespace"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
             Padding="2,2,2,2">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="2*"/>
        </Grid.RowDefinitions>

        <Border Grid.Column="1" Grid.Row="1" Margin="2,2,2,2" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/>
        <Border Grid.Column="0" Grid.Row="1" Margin="2,2,2,2" Background="Green" BorderBrush="DarkGreen" BorderThickness="5"/>
        <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Margin="2,2,2,2" Background="MediumPurple" BorderBrush="Purple" BorderThickness="5"/>
    </Grid>
</UserControl>

실제 코드에서이를 사용하는 방법

우리가 위에서 보여준 것을 일반화하기 위해 : 개별적인 것들은 " 여백 공백"의 고정 된 마진 을 포함하고, 그들이 보유한 컨테이너는 "여백 공백"의 여백 을 가져야합니다. 이러한 스타일을 응용 프로그램 리소스 사전에 적용하면 개별 항목에 대해 언급하지 않아도됩니다. "HalfTheWhiteSpace"를 정의하는 방법은 다음과 같습니다. 

<system:Double x:Key="DefaultMarginSize">2</system:Double>
<Thickness x:Key="HalfTheWhiteSpace" Left="{StaticResource DefaultMarginSize}" Top="{StaticResource DefaultMarginSize}" Right="{StaticResource DefaultMarginSize}" Bottom="{StaticResource DefaultMarginSize}"/>

그런 다음 다른 컨트롤 스타일을 기반으로 기본 스타일을 정의 할 수 있습니다 (기본 FontFamily, FontSize 등을 포함 할 수도 있음) 

<Style x:Key="BaseStyle" TargetType="{x:Type Control}">
    <Setter Property="Margin" Value="{StaticResource HalfTheWhiteSpace}"/>
</Style>

그런 다음이 여백을 사용하도록 TextBox의 기본 스타일을 정의 할 수 있습니다. 

<Style TargetType="TextBox" BasedOn="{StaticResource BaseStyle}"/>

나는 DatePickers, Labels 등 (컨테이너 내에서 보유 될 수있는 모든 것)에 대해 이러한 종류의 작업을 수행 할 수 있습니다. 이처럼 TextBlock의 스타일을 조심하십시오. 컨트롤은 많은 컨트롤에 의해 내부적으로 사용됩니다. TextBlock에서 파생 된 컨트롤을 직접 만들 것을 제안합니다. 당신은 기본 여백을 사용하도록 TextBlock의 스타일을 지정할 수 있습니다; XAML에서 명시 적으로 TextBlock을 사용할 때마다 TextBlock을 사용해야 합니다 .

비슷한 방법을 사용하여 일반적인 컨테이너 (예 : ScrollViewer, Border 등)에 패딩을 적용 할 수 있습니다.

이렇게하면 대부분 의 컨트롤에 여백과 패딩이 필요하지 않으므로 의도적으로이 디자인 원칙에서 벗어나기를 원하는 곳에서만 값을 지정하면됩니다.



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow