silverlight - Web ブラウザーでカスタム ナビゲーション バーのサイズを適切に変更する

Question

Silverlight を使用して、サイトのカスタム ナビゲーション バーを作成しようとしています。見た目は気に入っていますが、実際のWebページでのサイズに関しては苦労しています. これがどのように見えるかです

私は xaml を初めて使用するため、Silverlight を使用するので、基本的には、このデザインを適切に配置してサイズを正しく変更する方法に関するいくつかのヒントを探しています。ここにマークアップがあります

<UserControl x:Class="SiteNavigationBar.MainPage"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="1500">


<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="3*"/>
        <RowDefinition Height="1*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>     
    <Rectangle Grid.Row="1" Grid.ColumnSpan="7" Stroke="#FF666666" RadiusY="15" RadiusX="15" StrokeThickness="2" Canvas.Top="50" Canvas.Left="11">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFC4C4C4" Offset="1"/>
                <GradientStop Color="#FFFFFFFF" Offset="0"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Border Grid.Row="1" Grid.ColumnSpan="7" Margin="20">
        <Rectangle RadiusY="7" RadiusX="7" StrokeThickness="2" Stroke="#FFB1B1B1" Canvas.Left="21">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFF7F7F7"  Offset="1"/>
                    <GradientStop Color="#FFE8B13D"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
    </Border>


    <Grid Grid.Row="1" Grid.ColumnSpan="7" Margin="20">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Border Background="Transparent" BorderThickness="0,0,1,0"
                BorderBrush="LightGray">
            <TextBlock HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       FontSize="24"
                       FontWeight="Bold"
                       Foreground="Gray"
                       FontFamily="./gluk_foglihten.zip#Foglihten.otf">
                Home
            </TextBlock>
        </Border>

        <Border Grid.Column="1" Background="Transparent" BorderThickness="0,0,1,0"
                BorderBrush="LightGray">
            <TextBlock HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       FontSize="24"
                       FontWeight="Bold"
                       Foreground="Gray"
                       FontFamily="./gluk_foglihten.zip#Foglihten.otf">
                About
            </TextBlock>
        </Border>

        <Border Grid.Column="4" Background="Transparent" BorderThickness="0,0,1,0"
                BorderBrush="LightGray">
            <TextBlock HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       Margin="15,0,0,0"
                       FontSize="24"
                       FontWeight="Bold"
                       Foreground="Gray"
                       FontFamily="./gluk_foglihten.zip#Foglihten.otf">
                Nutrition
            </TextBlock>
        </Border>

        <Border Grid.Column="2" Background="Transparent" BorderThickness="0,0,1,0"
                BorderBrush="LightGray">
            <TextBlock Margin="0,0,15,0" HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       FontSize="24"
                       FontWeight="Bold"
                       Foreground="Gray"
                       FontFamily="./gluk_foglihten.zip#Foglihten.otf">
                Bloggers
            </TextBlock>
        </Border>

        <Border Grid.Column="5" Background="Transparent" BorderThickness="0,0,1,0"
                BorderBrush="LightGray">
            <TextBlock HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       FontSize="24"
                       FontWeight="Bold"
                       Foreground="Gray"
                       FontFamily="./gluk_foglihten.zip#Foglihten.otf">
                Inspiration
            </TextBlock>
        </Border>

        <Border Grid.Column="6" Background="Transparent" BorderThickness="0,0,1,0"
                BorderBrush="LightGray">
            <TextBlock HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       FontSize="24"
                       FontWeight="Bold"
                       Foreground="Gray"
                       FontFamily="./gluk_foglihten.zip#Foglihten.otf">
                Contact
            </TextBlock>
        </Border>
    </Grid>



    <Ellipse Grid.Column="2" Grid.Row="0"
             Grid.RowSpan="3"
             Grid.ColumnSpan="3"
             Margin="170,10,170,10"
             Stroke="LightGray">
        <Ellipse.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFC4C4C4" Offset="1"/>
                <GradientStop Color="#FFFFFFFF" Offset="0"/>
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>

    <Ellipse Grid.Column="2" Grid.Row="0"
             Grid.RowSpan="3"
             Grid.ColumnSpan="3"
             Margin="180,20,180,20"
             Stroke="LightGray">
        <Ellipse.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF3BC1FF" />
                <GradientStop Color="#FFFFFFFF" Offset="1"/>
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>

    <Ellipse Grid.Column="2" Grid.Row="0"
             Grid.RowSpan="3"
             Grid.ColumnSpan="3"
             Margin="200,40,200,40"
             Stroke="LightGray">
        <Ellipse.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFC4C4C4" Offset="1"/>
                <GradientStop Color="#FFFFFFFF" Offset="0"/>
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>

    <TextBlock Grid.Column="3" Grid.Row="1"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               FontSize="46"
               FontFamily="./fontscafe_marmellata-jam-demo.zip#Marmellata (Jam)_demo" Foreground="#FF898367">Bar</TextBlock>
</Grid>

Answer 1

ViewBoxを使用すると、この目的を達成できます。これに加えて、固定された FontSize 式を削除しました。

 <UserControl x:Class="SiteNavigationBar.MainPage"
  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"
  mc:Ignorable="d"
  d:DesignHeight="600" d:DesignWidth="1500">

<Viewbox>
<Grid>
<Grid.RowDefinitions>
    <RowDefinition Height="1*"/>
    <RowDefinition Height="3*"/>
    <RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>
    <ColumnDefinition/>
    <ColumnDefinition/>
    <ColumnDefinition/>
    <ColumnDefinition/>
    <ColumnDefinition/>
</Grid.ColumnDefinitions>     
<Rectangle Grid.Row="1" Grid.ColumnSpan="7" Stroke="#FF666666" RadiusY="15" RadiusX="15" StrokeThickness="2" Canvas.Top="50" Canvas.Left="11">
    <Rectangle.Fill>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFC4C4C4" Offset="1"/>
            <GradientStop Color="#FFFFFFFF" Offset="0"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>
<Border Grid.Row="1" Grid.ColumnSpan="7" Margin="20">
    <Rectangle RadiusY="7" RadiusX="7" StrokeThickness="2" Stroke="#FFB1B1B1" Canvas.Left="21">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFF7F7F7"  Offset="1"/>
                <GradientStop Color="#FFE8B13D"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Border>


<Grid Grid.Row="1" Grid.ColumnSpan="7" Margin="20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Border Background="Transparent" BorderThickness="0,0,1,0"
            BorderBrush="LightGray">
        <TextBlock HorizontalAlignment="Center"
                   VerticalAlignment="Center"

                   FontWeight="Bold"
                   Foreground="Gray"
                   FontFamily="./gluk_foglihten.zip#Foglihten.otf">
            Home
        </TextBlock>
    </Border>

    <Border Grid.Column="1" Background="Transparent" BorderThickness="0,0,1,0"
            BorderBrush="LightGray">
        <TextBlock HorizontalAlignment="Center"
                   VerticalAlignment="Center"

                   FontWeight="Bold"
                   Foreground="Gray"
                   FontFamily="./gluk_foglihten.zip#Foglihten.otf">
            About
        </TextBlock>
    </Border>

    <Border Grid.Column="4" Background="Transparent" BorderThickness="0,0,1,0"
            BorderBrush="LightGray">
        <TextBlock HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Margin="15,0,0,0"

                   FontWeight="Bold"
                   Foreground="Gray"
                   FontFamily="./gluk_foglihten.zip#Foglihten.otf">
            Nutrition
        </TextBlock>
    </Border>

    <Border Grid.Column="2" Background="Transparent" BorderThickness="0,0,1,0"
            BorderBrush="LightGray">
        <TextBlock Margin="0,0,15,0" HorizontalAlignment="Center"
                   VerticalAlignment="Center"

                   FontWeight="Bold"
                   Foreground="Gray"
                   FontFamily="./gluk_foglihten.zip#Foglihten.otf">
            Bloggers
        </TextBlock>
    </Border>

    <Border Grid.Column="5" Background="Transparent" BorderThickness="0,0,1,0"
            BorderBrush="LightGray">
        <TextBlock HorizontalAlignment="Center"
                   VerticalAlignment="Center"

                   FontWeight="Bold"
                   Foreground="Gray"
                   FontFamily="./gluk_foglihten.zip#Foglihten.otf">
            Inspiration
        </TextBlock>
    </Border>

    <Border Grid.Column="6" Background="Transparent" BorderThickness="0,0,1,0"
            BorderBrush="LightGray">
        <TextBlock HorizontalAlignment="Center"
                   VerticalAlignment="Center"

                   FontWeight="Bold"
                   Foreground="Gray"
                   FontFamily="./gluk_foglihten.zip#Foglihten.otf">
            Contact
        </TextBlock>
    </Border>
</Grid>



<Ellipse Grid.Column="2" Grid.Row="0"
         Grid.RowSpan="3"
         Grid.ColumnSpan="3"
         Margin="170,10,170,10"
         Stroke="LightGray">
    <Ellipse.Fill>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFC4C4C4" Offset="1"/>
            <GradientStop Color="#FFFFFFFF" Offset="0"/>
        </LinearGradientBrush>
    </Ellipse.Fill>
</Ellipse>

<Ellipse Grid.Column="2" Grid.Row="0"
         Grid.RowSpan="3"
         Grid.ColumnSpan="3"
         Margin="180,20,180,20"
         Stroke="LightGray">
    <Ellipse.Fill>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF3BC1FF" />
            <GradientStop Color="#FFFFFFFF" Offset="1"/>
        </LinearGradientBrush>
    </Ellipse.Fill>
</Ellipse>

<Ellipse Grid.Column="2" Grid.Row="0"
         Grid.RowSpan="3"
         Grid.ColumnSpan="3"
         Margin="200,40,200,40"
         Stroke="LightGray">
    <Ellipse.Fill>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFC4C4C4" Offset="1"/>
            <GradientStop Color="#FFFFFFFF" Offset="0"/>
        </LinearGradientBrush>
    </Ellipse.Fill>
</Ellipse>

<TextBlock Grid.Column="3" Grid.Row="1"
           HorizontalAlignment="Center"
           VerticalAlignment="Center"

           FontFamily="./fontscafe_marmellata-jam-demo.zip#Marmellata (Jam)_demo" Foreground="#FF898367">Bar</TextBlock>