네. Margin으로 컨트롤 간격을 결정할 수 있습니다. 그런데 어떤 레이아웃을 사용 하느냐에 따라 달라질 수 있습니다. 가령 전체 사이즈에서 버튼을 가변 사이즈로 배치하고 싶을 때는 Gird의 RowDefinitions
, ColumnDefinition
에 높이, 너비를 "*"로 주면 가능합니다.
<Window x:Class="WpfApp17.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp17"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800" Background="#353040">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<local:ElementControl Grid.Row="0" Grid.Column="0" Weight="1.00" ElementName="Hydrogen">H</local:ElementControl>
<local:ElementControl Grid.Row="0" Grid.Column="17">He</local:ElementControl>
<local:ElementControl Grid.Row="1" Grid.Column="0">Li</local:ElementControl>
<local:ElementControl Grid.Row="1" Grid.Column="1">Be</local:ElementControl>
<local:ElementControl Grid.Row="1" Grid.Column="12">B</local:ElementControl>
<local:ElementControl Grid.Row="1" Grid.Column="13">C</local:ElementControl>
<local:ElementControl Grid.Row="1" Grid.Column="14">N</local:ElementControl>
<local:ElementControl Grid.Row="1" Grid.Column="15">O</local:ElementControl>
<local:ElementControl Grid.Row="1" Grid.Column="16">F</local:ElementControl>
<local:ElementControl Grid.Row="1" Grid.Column="17">Ne</local:ElementControl>
<local:ElementControl Grid.Row="2" Grid.Column="0">Na</local:ElementControl>
<local:ElementControl Grid.Row="2" Grid.Column="1">Mg</local:ElementControl>
<!-- .. -->
</Grid>
</Window>
자신이 만든 컨트롤에 다양한 속성을 부여하려면 말한 대로 Dependency Property
를 구현하면 됩니다.
public class ElementControl : ContentControl
{
public static DependencyProperty WeightProperty = DependencyProperty.Register("Weight", typeof(string), typeof(ElementControl), new PropertyMetadata());
public static DependencyProperty ElementNameProperty = DependencyProperty.Register("ElementName", typeof(string), typeof(ElementControl), new PropertyMetadata());
public string Weight { get => (string)GetValue(WeightProperty); set => SetValue(WeightProperty, value); }
public string ElementName { get => (string)GetValue(ElementNameProperty); set => SetValue(ElementNameProperty, value);}
static ElementControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ElementControl), new FrameworkPropertyMetadata(typeof(ElementControl)));
}
}
위의 구현은 ContentControl
을 상속받아 Content를 그대로 사용하고 있습니다.
아래는 해당 컨트롤의 스타일입니다.
| Thmes\Generic.xaml
<Style TargetType="{x:Type local:ElementControl}">
<Setter Property="Margin" Value="2" />
<Setter Property="Padding" Value="0" />
<Setter Property="Background" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ElementControl}">
<Border Background="{TemplateBinding Background}" Margin="{TemplateBinding Margin}" Padding="{TemplateBinding Padding}" CornerRadius="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Viewbox>
<Grid Width="100" Height="100">
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="15" Margin="5,0,0,0" Text="{TemplateBinding Weight}" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40" FontFamily="Araial Rounded MT Bold">
<ContentPresenter />
</TextBlock>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="20" FontFamily="Araial Rounded MT Bold" Margin="0,0,0,5" Text="{TemplateBinding ElementName}" />
</Grid>
</Viewbox>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
여기에서 Background는 기본 구현된 속성이여서 TemplateBinding
으로 넘겨주면 되고, CornerRadius
는 ContentControl
에 없으므로 Dependency Property
를 구현해서 Border
에 넘겨줘도 됩니다.
그런데 어짜피 Border
가 최상위 UI 구성이므로 저처럼 ContentControl
에서 상속 받는게 아니라 그냥 Border
에서 상속 받으면 CornerRadius
를 바로 쓸 수 있습니다.