让自定义导航栏在Web浏览器中正确重新设置尺寸

我在尝试使用silverlight为自己的网站构建自定义导航栏。我喜欢它的外观，但在实际网页中的大小方面，我遇到了麻烦。这里是如何看起来 rough version 让自定义导航栏在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>

来源

2013-05-08 Adrian

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

来源

2013-05-08 06:41:47

我实际上没有尝试使用视框之前，我昨天晚上去睡觉，但我只给了它2分钟“fedangling”的。我不喜欢它如何“sm”“我的酒吧，并将椭圆限制在用于创建酒吧的矩形中。今晚我会试着再捣乱一次，回到这里，反馈并希望得到一个检查的答案。 – Adrian 2013-05-08 16:26:32

让自定义导航栏在Web浏览器中正确重新设置尺寸

回答

相关问题