본문 바로가기
프로그래밍/UWP | WPF

UWP Grid를 이용한 화면 분할 및 Border를 이용한 Grid 연결

by 남생 namsaeng 2022. 5. 25.
반응형

[Grid를 이용한 화면 분할 및 Border를 이용한 컴포넌트 구성 예시]

  1.  처음 설정하는 Grid.RowDefinitions 및 Grid.ColumnDefinitions로 전체 화면을 분할한다.
  2.  Border로 구성할 컴포넌트의 위치를 잡는다. Border 안에는 Grid로 또다시 화면 분할이 가능하다.
  3.  이미지 전시할 크기에 따라 Border Gird.ColumSpan 및 Grid.RowSpan을 조절하고, Stretch 속성을 "Fill"로 설정한다.
  4.  삼각형, 사각형 및 원과 같은 도형 위에 텍스트를 그리고 싶을 때에는 Canvas 안에 Ellipse와 TextBlock 클래스를 사용한다.
  5. TextBlock에서 다루는 문자열이 한줄 이상일 경우에는 LineBreak 클래스를 이용한다.
  6. 컴포넌트에 바탕색에 그라데이션을 입히고 싶을 때에는 LinearGradientBrush 클래스를 이용한다.

 

<MainPage.xaml>

<Page
    x:Class="Grid_and_Border.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Grid_and_Border"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid x:Name="MainPane" Background="Beige" BorderBrush="White" BorderThickness="3">
        <Grid.RowDefinitions>
            <RowDefinition Height="0.5*"/>
            <RowDefinition Height="0.6*"/>
            <RowDefinition Height="0.5*"/>
            <RowDefinition Height="1.4*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.6*"/>
            <ColumnDefinition Width="0.6*"/>
            <ColumnDefinition Width="0.6*"/>
            <ColumnDefinition Width="0.6*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Border Grid.Row="0" Grid.ColumnSpan="5" BorderBrush="White" BorderThickness="3" Background="Green">
            <TextBlock Text="Animal Game" FontSize="25" Foreground="White" FontStyle="Italic" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Border>
        <Border Grid.Row="1" Grid.ColumnSpan="2" BorderBrush="White" BorderThickness="3" Background="Violet">
            <TextBlock Text="First Zoo" FontSize="30" Foreground="White" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Border>
        <Border Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" BorderBrush="White" BorderThickness="3" Background="Violet">
            <TextBlock Text="Second Zoo" FontSize="30" Foreground="White" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Border>
        <Border Grid.Row="1" Grid.Column="4" BorderBrush="White" BorderThickness="3" Background="Black">
            <TextBlock Text="Entrance Fee : 5$" FontSize="30" Foreground="Yellow" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Border>
        <Border Grid.Row="2" Grid.Column="0" BorderBrush="White" BorderThickness="1" Background="DarkBlue">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBlock Text="Rabbits" FontSize="25" Foreground="White" FontWeight="Bold"/>
            </StackPanel>
        </Border>
        <Border Grid.Row="2" Grid.Column="1" BorderBrush="White" BorderThickness="1" Background="DarkBlue">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBlock Text="Doggies" FontSize="25" Foreground="White" FontWeight="Bold"/>
            </StackPanel>
        </Border>
        <Border Grid.Row="2" Grid.Column="2" BorderBrush="White" BorderThickness="1" Background="DarkBlue">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBlock Text="Cats" FontSize="25" Foreground="White" FontWeight="Bold"/>
            </StackPanel>
        </Border>
        <Border Grid.Row="2" Grid.Column="3" BorderBrush="White" BorderThickness="1" Background="DarkBlue">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBlock Text="Hamsters" FontSize="25" Foreground="White" FontWeight="Bold"/>
            </StackPanel>
        </Border>
        <Border Grid.Row="3" Grid.Column="0" Grid.RowSpan="3" BorderBrush="DarkBlue" BorderThickness="1">
            <Grid Margin="5,10,5,10" Background="Black">
                <Image Source="/Assets/rabbits.jpg" Stretch="Fill"/>
            </Grid>
        </Border>
        <Border Grid.Row="3" Grid.Column="1" Grid.RowSpan="3" BorderBrush="DarkBlue" BorderThickness="1">
            <Grid Margin="5,10,5,10" Background="Black">
                <Image Source="/Assets/doggies.jpg" Stretch="Fill"/>
            </Grid>
        </Border>
        <Border Grid.Row="3" Grid.Column="2" Grid.RowSpan="3" BorderBrush="DarkBlue" BorderThickness="1">
            <Grid Margin="5,10,5,10" Background="Black">
                <Image Source="/Assets/cats.jpg" Stretch="Fill"/>
            </Grid>
        </Border>
        <Border Grid.Row="3" Grid.Column="3" Grid.RowSpan="3" BorderBrush="DarkBlue" BorderThickness="1">
            <Grid Margin="5,10,5,10" Background="Black">
                <Image Source="/Assets/hamsters.jpg" Stretch="Fill"/>
            </Grid>
        </Border>
        <Border Grid.Row="6" Grid.Column="0" Grid.RowSpan="2" BorderBrush="DarkBlue" BorderThickness="1">
            <Grid Margin="5,10,5,10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border Grid.Row="0" Grid.Column="0">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no1_1_1" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="1" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="0" Grid.Column="1">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no1_1_2" Fill="Aqua" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="2" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="0" Grid.Column="2">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no1_1_3" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="3" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="1" Grid.Column="0">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no1_2_1" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="4" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="1" Grid.Column="1">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no1_2_2" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="5" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="1" Grid.Column="2">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no1_2_3" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="6" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="2" Grid.Column="0">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no1_3_1" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="7" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="2" Grid.Column="1">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no1_3_2" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="8" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="2" Grid.Column="2">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no1_3_3" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="9" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
            </Grid>
        </Border>
        <Border Grid.Row="6" Grid.Column="1" Grid.RowSpan="2" BorderBrush="DarkBlue" BorderThickness="1">
            <Grid Margin="5,10,5,10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border Grid.Row="0" Grid.Column="0">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no2_1_1" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="1" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="0" Grid.Column="1">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no2_1_2" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="2" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="0" Grid.Column="2">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no2_1_3" Fill="Aqua" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="3" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="1" Grid.Column="0">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no2_2_1" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="4" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="1" Grid.Column="1">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no2_2_2" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="5" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="1" Grid.Column="2">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no2_2_3" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="6" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="2" Grid.Column="0">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no2_3_1" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="7" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="2" Grid.Column="1">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no2_3_2" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="8" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="2" Grid.Column="2">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no2_3_3" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="9" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
            </Grid>
        </Border>
        <Border Grid.Row="6" Grid.Column="2" Grid.RowSpan="2" BorderBrush="DarkBlue" BorderThickness="1">
            <Grid Margin="5,10,5,10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border Grid.Row="0" Grid.Column="0">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no3_1_1" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="1" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="0" Grid.Column="1">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no3_1_2" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="2" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="0" Grid.Column="2">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no3_1_3" Fill="Red" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="3" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="1" Grid.Column="0">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no3_2_1" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="4" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="1" Grid.Column="1">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no3_2_2" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="5" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="1" Grid.Column="2">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no3_2_3" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="6" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="2" Grid.Column="0">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no3_3_1" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="7" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="2" Grid.Column="1">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no3_3_2" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="8" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="2" Grid.Column="2">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no3_3_3" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="9" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
            </Grid>
        </Border>
        <Border Grid.Row="6" Grid.Column="3" Grid.RowSpan="2" BorderBrush="DarkBlue" BorderThickness="1">
            <Grid Margin="5,10,5,10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border Grid.Row="0" Grid.Column="0">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no4_1_1" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="1" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="0" Grid.Column="1">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no4_1_2" Fill="Aqua" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="2" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="0" Grid.Column="2">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no4_1_3" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="3" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="1" Grid.Column="0">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no4_2_1" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="4" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="1" Grid.Column="1">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no4_2_2" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="5" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="1" Grid.Column="2">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no4_2_3" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="6" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="2" Grid.Column="0">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no4_3_1" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="7" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="2" Grid.Column="1">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no4_3_2" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="8" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
                <Border Grid.Row="2" Grid.Column="2">
                    <Canvas Margin="30,10,0,0">
                        <Ellipse x:Name="no4_3_3" Fill="Green" Height="50" Width="50"></Ellipse>
                        <TextBlock Text="9" FontSize="30" Margin="16,2,0,0"/>
                    </Canvas>
                </Border>
            </Grid>
        </Border>
        <Border Grid.Row="8" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="4" Background="Black">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="0.2*"/>
                    <ColumnDefinition Width="0.8*"/>
                </Grid.ColumnDefinitions>
                <Border Grid.Row="0" Grid.ColumnSpan="3" BorderBrush="Red" BorderThickness="5">
                    <ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Auto">
                        <TextBlock Name="part2_log" FontSize="30" LineStackingStrategy="BlockLineHeight" Foreground="Aqua" Margin="20,0,10,10" TextWrapping="Wrap">
                                *Animal Quiz*
                                <LineBreak/>
                                O : The number of rabbits is 2
                                <LineBreak/>
                                O : The number of doggies is 3
                                <LineBreak/>
                                X : The number of cats is 4
                                <LineBreak/>
                                O : The number of hamsters is 2
                        </TextBlock>
                    </ScrollViewer>
                </Border>
                <Border Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="2" Background="Black" BorderBrush="Orange" BorderThickness="5">
                    <Button Background="#3d3939" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="#4f4a4a" BorderThickness="3" Height="180" Width="240" FontSize="45" FontWeight="Bold" >
                        <TextBlock xml:space="preserve" Foreground="Pink" >  Send<LineBreak/>Request</TextBlock>
                    </Button>
                </Border>
            </Grid>
        </Border>
        <Border Grid.Row="2" Grid.Column="4" Grid.RowSpan="2" BorderBrush="White" BorderThickness="1">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.4*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border Grid.Row="0" Grid.ColumnSpan="5">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="Black"/>
                            <GradientStop Color="White" Offset="0.625"/>
                        </LinearGradientBrush>
                    </Border.Background>
                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                        <TextBlock Text="Animal Feeding" FontSize="25" FontWeight="Bold" />
                    </StackPanel>
                </Border>
                <Border Grid.Row="0" Grid.Column="4">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="Black"/>
                            <GradientStop Color="White" Offset="0.625"/>
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
                <Border Grid.Row="1" Grid.Column="0">
                    <Button Background="Pink" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="7" Height="140" Width="100" FontSize="15" FontWeight="Bold">
                        <TextBlock xml:space="preserve">R<LineBreak/>A<LineBreak/>B<LineBreak/>B<LineBreak/>I<LineBreak/>T</TextBlock>
                    </Button>
                </Border>
                <Border Grid.Row="1" Grid.Column="1">
                    <Button Background="Pink" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="7" Height="140" Width="100" FontSize="15" FontWeight="Bold">
                        <TextBlock xml:space="preserve">D<LineBreak/>O<LineBreak/>G<LineBreak/>G<LineBreak/>Y</TextBlock>
                    </Button>
                </Border>
                <Border Grid.Row="1" Grid.Column="2">
                    <Button Background="Pink" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="7" Height="140" Width="100" FontSize="15" FontWeight="Bold">
                        <TextBlock xml:space="preserve">C<LineBreak/>A<LineBreak/>T</TextBlock>
                    </Button>
                </Border>
                <Border Grid.Row="1" Grid.Column="3">
                    <Button Background="Pink" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="7" Height="140" Width="100" FontSize="12" FontWeight="Bold">
                        <TextBlock xml:space="preserve">H<LineBreak/>A<LineBreak/>M<LineBreak/>S<LineBreak/>T<LineBreak/>E<LineBreak/>R</TextBlock>
                    </Button>
                </Border>
                <Border Grid.Row="1" Grid.Column="4">
                    <Button Background="Yellow" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="7" Height="140" Width="100" FontSize="15" FontWeight="Bold">
                        <TextBlock xml:space="preserve">W<LineBreak/>h<LineBreak/>o<LineBreak/>l<LineBreak/>e</TextBlock>
                    </Button>
                </Border>
            </Grid>
        </Border>
        <Border Grid.Row="4" Grid.Column="4" Grid.RowSpan="2" BorderBrush="White" BorderThickness="1" Background="Black">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.7*" />
                    <RowDefinition Height="0.55*" />
                    <RowDefinition Height="1.4*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border Grid.Row="0" Grid.ColumnSpan="5">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="Black"/>
                            <GradientStop Color="White" Offset="0.625"/>
                        </LinearGradientBrush>
                    </Border.Background>
                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                        <TextBlock Text="Remaining Adoption Date " FontSize="25" FontWeight="Bold"/>
                    </StackPanel>
                </Border>
                <Border Grid.Row="0" Grid.Column="4">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="Black"/>
                            <GradientStop Color="White" Offset="0.625"/>
                        </LinearGradientBrush>
                    </Border.Background>

                </Border>
                <Border Grid.Row="1" Grid.ColumnSpan="5" Background="Blue">
                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                        <TextBlock Text="D-day: 4" FontSize="25" Foreground="White" FontWeight="Bold"/>
                    </StackPanel>
                </Border>
                <Border Grid.Row="2" Grid.Column="0">
                    <Button Background="Green" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="7" Height="107" Width="100">
                        <TextBlock Foreground="White" FontSize="17" FontWeight="Bold">1 day</TextBlock>
                    </Button>
                </Border>
                <Border Grid.Row="2" Grid.Column="1">
                    <Button Background="Green" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="7" Height="107" Width="100">
                        <TextBlock Foreground="White" FontSize="17" FontWeight="Bold">1 week</TextBlock>
                    </Button>
                </Border>
                <Border Grid.Row="2" Grid.Column="2">
                    <Button Background="Green" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="7" Height="107" Width="100">
                        <TextBlock Foreground="White" FontSize="17" FontWeight="Bold">1 month</TextBlock>
                    </Button>
                </Border>
                <Border Grid.Row="2" Grid.Column="3">
                    <Button Background="Green" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="7" Height="107" Width="100">
                        <TextBlock Foreground="White" FontSize="17" FontWeight="Bold">1 year</TextBlock>
                    </Button>
                </Border>
                <Border Grid.Row="2" Grid.Column="4">
                    <Button Background="SlateBlue" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="7" Height="107" Width="100">
                        <TextBlock xml:space="preserve" Foreground="White" FontSize="12" FontWeight="Bold">Immediate<LineBreak/> Adoption</TextBlock>
                    </Button>
                </Border>
            </Grid>
        </Border>
        <Border Grid.Row="6" Grid.Column="4" Grid.RowSpan="2" BorderBrush="White" BorderThickness="1" Background="Black">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.43*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border Grid.Row="0" Grid.ColumnSpan="4">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="Black"/>
                            <GradientStop Color="White" Offset="0.625"/>
                        </LinearGradientBrush>
                    </Border.Background>

                    <TextBlock Text="Animal Care" FontSize="25" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>

                </Border>
                <Border Grid.Row="0" Grid.Column="3">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="Black"/>
                            <GradientStop Color="White" Offset="0.625"/>
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
                <Border Grid.Row="1" Grid.Column="0">
                    <Button Background="SkyBlue" Foreground="white" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="7" Height="145" Width="130" FontSize="20" FontWeight="Bold">
                        <TextBlock xml:space="preserve" VerticalAlignment="Center" HorizontalAlignment="Center">Good<LineBreak/>Music</TextBlock>
                    </Button>
                </Border>
                <Border Grid.Row="1" Grid.Column="1">
                    <Button Background="SkyBlue" Foreground="white" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="7" Height="145" Width="130" FontSize="20" FontWeight="Bold">
                        <TextBlock xml:space="preserve" VerticalAlignment="Center" HorizontalAlignment="Center">Good<LineBreak/>Snack</TextBlock>
                    </Button>
                </Border>
                <Border Grid.Row="1" Grid.Column="2">
                    <Button Background="SkyBlue" Foreground="white" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="7" Height="145" Width="130" FontSize="20" FontWeight="Bold">
                        <TextBlock xml:space="preserve" VerticalAlignment="Center" HorizontalAlignment="Center">Walking<LineBreak/>   with</TextBlock>
                    </Button>
                </Border>
                <Border Grid.Row="1" Grid.Column="3">
                    <Button Background="SkyBlue" Foreground="white" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="7" Height="145" Width="130" FontSize="20" FontWeight="Bold">
                        <TextBlock xml:space="preserve" VerticalAlignment="Center" HorizontalAlignment="Center">Traning</TextBlock>
                    </Button>
                </Border>
            </Grid>
        </Border>
        <Border Grid.Row="8" Grid.Column="4" Grid.RowSpan="2" BorderBrush="White" BorderThickness="1" Background="Black">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.43*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border Grid.Row="0" Grid.ColumnSpan="3">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="Black"/>
                            <GradientStop Color="White" Offset="0.625"/>
                        </LinearGradientBrush>
                    </Border.Background>
                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                        <TextBlock Text="Temperature Setting" FontSize="20" FontWeight="Bold" Margin="0,0,5,0"/>
                    </StackPanel>
                </Border>
                <Border Grid.Row="0" Grid.Column="3">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="Black"/>
                            <GradientStop Color="White" Offset="0.625"/>
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
                <Border Grid.Row="1" Grid.Column="0">
                    <Button Background="AliceBlue" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="7" Height="140" Width="170" FontSize="20" FontWeight="Bold">
                        <TextBlock xml:space="preserve" VerticalAlignment="Center" HorizontalAlignment="Center">a little<LineBreak/> cold</TextBlock>
                    </Button>
                </Border>
                <Border Grid.Row="1" Grid.Column="1">
                    <Button Background="AliceBlue" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="7" Height="140" Width="170" FontSize="20" FontWeight="Bold">
                        <TextBlock xml:space="preserve" VerticalAlignment="Center" HorizontalAlignment="Center">a little<LineBreak/>  hot</TextBlock>
                    </Button>
                </Border>
                <Border Grid.Row="1" Grid.Column="2">
                    <Button Background="AliceBlue" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="7" Height="140" Width="170" FontSize="20" FontWeight="Bold">
                        <TextBlock xml:space="preserve" VerticalAlignment="Center" HorizontalAlignment="Center">       Auto<LineBreak/>Temperature</TextBlock>
                    </Button>
                </Border>
            </Grid>
        </Border>
    </Grid>
</Page>

 

 

[실행결과]

UWP Mainpage using Grid and Border Class
UWP Mainpage using Grid and Border Class

 

 

 

 

반응형

'프로그래밍 > UWP | WPF' 카테고리의 다른 글

[UWP] Button pressed 효과 만들기  (0) 2022.08.11
[UWP] 프로그램 실행 시 화면의 크기를 최대화하는 방법  (0) 2022.08.11
UWP 프로그램 실행 시에 랜덤 이미지 보여주기  (0) 2022.05.25
UWP 버튼에 마우스 커서 올리면(mouse hover) 안보임 해결방법  (0) 2022.05.24
UWP 페이지 이동 및 Grid 화면 분할  (0) 2022.05.24

관련글

댓글

티스토리툴바