silverlight - 让自定义导航栏在 Web 浏览器中正确调整大小

Question

我正在尝试使用 Silverlight 为网站构建自定义导航栏。我喜欢它的外观，但是在实际网页中的大小方面我遇到了麻烦。这是它的外观

我是 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>