使用按钮wpf .net创建一个Navbar

Question

我想创建一个类似于用于在wpf中创建网站的导航栏。我想要这样的东西：

我在xaml中有这段代码：

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="auto" />
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Content="Companies" />
        <Button Grid.Row="0" Grid.Column="1" Content="Orders" />
        <Button Grid.Row="0" Grid.Column="2" Content="Employes" />
        <Button Grid.Row="0" Grid.Column="3" Content="Timesheets" />
        <Button Grid.Row="0" Grid.Column="4" Content="Payroll" />
        <Button Grid.Row="0" Grid.Column="5" Content="Billing" />
        <Button Grid.Row="0" Grid.Column="6" Content="Reports" />
    </Grid>

这是我的布局：

我怎么能这样做“导航栏”？有可能创造出类似的惊人东西吗？如果是的我怎么能这样做？ 谢谢

Answer 1

这应该有用，但它不是按钮（造型问题）而且它没有箭头位

Private Sub Load() Handles Me.Loaded
    MenuReset()
End Sub
Private Sub MenuReset() Handles menu1.MouseLeave, menu2.MouseLeave, menu3.MouseLeave
    Dim fore, back, border As New SolidColorBrush
    fore.Color = Color.FromRgb(0, 0, 0)
    back.Color = Color.FromArgb(0, 0, 0, 0)
    border.Color = Color.FromArgb(0, 0, 0, 0)
    menu1.Foreground = fore
    menu1.Background = back
    menu1.BorderBrush = border
    menu2.Foreground = fore
    menu2.Background = back
    menu2.BorderBrush = border
    menu3.Foreground = fore
    menu3.Background = back
    menu3.BorderBrush = border
End Sub
Private Sub MenuMouseMove(sender As Label, e As EventArgs) Handles menu1.MouseMove, menu2.MouseMove, menu3.MouseMove
    Dim grad As New LinearGradientBrush
    Dim fore, border As New SolidColorBrush
    grad.StartPoint = New Point(0.5, 0)
    grad.EndPoint = New Point(0.5, 1)
    grad.GradientStops.Add(New GradientStop(Color.FromRgb(146, 179, 19), 0))
    grad.GradientStops.Add(New GradientStop(Color.FromRgb(116, 158, 9), 1))
    fore.Color = Color.FromRgb(255, 255, 255)
    border.Color = Color.FromArgb(255, 0, 0, 0)
    sender.Background = grad
    sender.Foreground = fore
    sender.BorderBrush = border
End Sub

<Grid Background="#ff86878a">
    <Grid x:Name="Menu" Margin="0" VerticalAlignment="Top" Height="30">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFC4C4C4" Offset="0.873"/>
                <GradientStop Color="#FFDEDEDE"/>
                <GradientStop Color="#FF9C9C9C" Offset="0.92"/>
                <GradientStop Color="#FF626466" Offset="0.96"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Label x:Name="menu1" Grid.Column="0" Content="File" HorizontalAlignment="Left" Margin="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Padding="20,0,20,0" BorderBrush="Black" BorderThickness="0,0,0,3">
            <Label.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF92B312" Offset="0"/>
                    <GradientStop Color="#FF749E09" Offset="1"/>
                </LinearGradientBrush>
            </Label.Background>
        </Label>
        <Label x:Name="menu2" Grid.Column="1" Content="Gates" HorizontalAlignment="Left" Margin="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Padding="20,0,20,0" BorderBrush="Black" BorderThickness="0,0,0,3">
            <Label.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF92B312" Offset="0"/>
                    <GradientStop Color="#FF749E09" Offset="1"/>
                </LinearGradientBrush>
            </Label.Background>
        </Label>
        <Label x:Name="menu3" Grid.Column="2" Content="Flip Flops" HorizontalAlignment="Left" Margin="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Padding="20,0,20,0" BorderBrush="Black" BorderThickness="0,0,0,3">
            <Label.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF92B312" Offset="0"/>
                    <GradientStop Color="#FF749E09" Offset="1"/>
                </LinearGradientBrush>
            </Label.Background>
        </Label>
    </Grid>

</Grid>