Question

我正在尝试使用silverlight为网站构建自定义导航栏。我喜欢它看起来的样子，但是当涉及到实际网页中的大小时，我遇到了麻烦。这是它的外观 rough version

我是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表达式。

enter image description here

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

获取自定义导航栏以在Web浏览器中正确调整大小

1 个答案: