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

【问题标题】：Getting a custom navigation bar to re-size properly in web browser让自定义导航栏在 Web 浏览器中正确调整大小
【发布时间】：2013-05-08 05:44:50
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

    标签： silverlight xaml


    【解决方案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>

    【讨论】：

    • 我昨晚睡前确实尝试过使用视图框，但我只给了它 2 分钟的“喂食”时间。我不喜欢它如何“平滑”我的条形并将椭圆约束到用于创建条形的矩形。今晚我会尝试再搞砸一些，然后回到这里反馈并希望得到检查的答案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-12-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode