Menu from row0 doesn't show correctly

simsenVejle

Well-known member
Joined
Feb 14, 2021
Messages
46
Programming Experience
Beginner
In top I have a menu. When click on a button I want to show the stackpanel that expands over 2 rows. But it only shows some of the dropdown menu - the rest is hidden behind row1 (in this case a textblock but in time it will be a usercontrol). So it only shows some of the stackpanels buttons. What can I do, to show all buttons in the stackpanel? I have tried to make a rowspan 2. I have tried to seperate in 2 grids an so on. But nothing helps.

If you want me to send you the solution just say so.

Best regards
Simsen :)

MainWindow.xaml

C#:
<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf" x:Name="AnsiBug"  x:Class="AnsiBug.MainWindow"
        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"
        xmlns:local="clr-namespace:AnsiBug"
        mc:Ignorable="d"
        Title="MainWindow" Height="800" Width="1200" HorizontalAlignment="Center" VerticalAlignment="Center" WindowStartupLocation="CenterScreen">
    <Window.Resources>
        <!--Base Button Style-->
    </Window.Resources>
    <StackPanel>
        <Grid Margin="5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="250"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="150"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="130" />
                <RowDefinition Height="600" />
            </Grid.RowDefinitions>
                <Image Source="/Images/Logo/ANSI.gif" Grid.Row="0" Grid.Column="0" Height="100" />
                <Image Source="/Images/Logo/logoBug.gif" Grid.Row="0" Grid.Column="2" Height="100" />
                
                <Grid Grid.Column="1">
                    <Grid Margin="5">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />                           
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="180" />
                        </Grid.RowDefinitions>
                        <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="0" Margin="5 0 0 0">
                            <Button x:Name="BtnProjects" Content="Projekter" Style="{StaticResource TopMenuButton}" />
                            <Image Source="/Images/TopDivider.jpg" />
                            <StackPanel x:Name="ProjectsSubMenu">
                                <Button x:Name="BtnDashBoard" Content=" Dashboard" Style="{StaticResource TopSubMenuButton}" />
                                <Button x:Name="BtnNewBug" Content=" Ny fejl" Style="{StaticResource TopSubMenuButton}" />
                            </StackPanel>
                        </StackPanel>
                        <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="1" Margin="5 0 0 0">
                            <Button x:Name="BtnLists" Content="Lister" Style="{StaticResource TopMenuButton}" />
                            <Image Source="/Images/TopDivider.jpg" />
                            <StackPanel x:Name="ListsSubMenu">
                                <Button x:Name="BtnMyBugs" Content=" Mine fejl" Style="{StaticResource TopSubMenuButton}" />
                                <Button x:Name="BtnNewBugs" Content=" Nye fejl" Style="{StaticResource TopSubMenuButton}" />
                                <Button x:Name="BtnAllBugs" Content=" Alle fejl" Style="{StaticResource TopSubMenuButton}" />
                                <Button x:Name="BtnUnAssignedBugs" Content=" Ikke tildelte fejl" Style="{StaticResource TopSubMenuButton}" />
                                <Button x:Name="BtnClosedBugs" Content=" Lukkede fejl" Style="{StaticResource TopSubMenuButton}" />
                            </StackPanel>
                        </StackPanel>
                        <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="2" Margin="5 0 0 0">
                            <Button x:Name="BtnPreferences" Content="Indstillinger" Style="{StaticResource TopMenuButton}" />
                            <Image Source="/Images/TopDivider.jpg" />
                            <StackPanel x:Name="PreferencesSubMenu">
                                <Button x:Name="BtnMyInfo" Content=" Min info" Style="{StaticResource TopSubMenuButton}" />
                            </StackPanel>
                        </StackPanel>
                        <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="3" Margin="5 0 0 0">
                            <Button x:Name="BtnAdministration" Content="Administration" Style="{StaticResource TopMenuButton}" />
                            <Image Source="/Images/TopDivider.jpg" />
                            <StackPanel x:Name="AdministrationSubMenu">
                                <Button x:Name="BtnShowUsers" Content=" Vis brugere" Style="{StaticResource TopSubMenuButton}" />
                                <Button x:Name="BtnAddUser" Content=" Tilføj bruger" Style="{StaticResource TopSubMenuButton}" />
                                <Button x:Name="BtnEditAccount" Content=" Ret konto" Style="{StaticResource TopSubMenuButton}" />
                                <Button x:Name="BtnShowProjects" Content=" Vis projekter" Style="{StaticResource TopSubMenuButton}" />
                                <Button x:Name="BtnAddProject" Content=" Tilføj projekt" Style="{StaticResource TopSubMenuButton}" />
                            </StackPanel>
                        </StackPanel>
                        <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="4" Margin="5 0 0 0">
                            <Button x:Name="BtnReports" Click="BtnReports_Click" Content="Rapporter" Style="{StaticResource TopMenuButton}" />
                            <Image Source="/Images/TopDivider.jpg" />
                            <StackPanel x:Name="ReportsSubMenu" Grid.RowSpan="2">
                                <Button x:Name="BtnTextReports" Content=" Tekst rapporter" Style="{StaticResource TopSubMenuButton}" />
                                <Button x:Name="BtnReporsMyBugs" Content=" Mine fejl" Style="{StaticResource TopSubMenuButton}" />
                                <Button x:Name="BtnReporsNewBugs" Content=" Nye fejl" Style="{StaticResource TopSubMenuButton}" />
                                <Button x:Name="BtnReporsAllBugs" Content=" Alle fejl" Style="{StaticResource TopSubMenuButton}" />
                                <Button x:Name="BtnReporsClosedBugs" Content=" Lukkede fejl" Style="{StaticResource TopSubMenuButton}" />
                                <Button x:Name="BtnReporsNoAssignedBugs" Content=" Ikke tildelte fejl" Style="{StaticResource TopSubMenuButton}" />
                                <Button x:Name="BtnManagement" Content=" Management" Style="{StaticResource TopSubMenuButton}" />
                            </StackPanel>
                        </StackPanel>
                        <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="5" Margin="5 0 0 0">
                            <Button x:Name="BtnLogout" Click="BtnLogout_Click" HorizontalAlignment="Right" HorizontalContentAlignment="Right" Content="Log ud" Style="{StaticResource TopMenuButton}" />
                            <Image Source="/Images/TopDivider.jpg" />
                        </StackPanel>
                    </Grid>
                </Grid>

            <WrapPanel Orientation="Vertical" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" >
                <TextBlock x:Name="TextTextBlock" TextWrapping="Wrap" Text="Her kommer anden række sol sommer strand og vand en kvinde og en mand. Glemmer du så husker jeg det ord for ord alting brast men det gør ikke spor minderne har jeg da lov at have dem kan du aldrig nej aldrig tag Husker du de ord vi sammen fandt" />
            </WrapPanel>
        </Grid>
        
        <!--<Grid Margin="15 5 15 5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1150" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="600" />
            </Grid.RowDefinitions>
            <TextBlock Text="Her kommer anden række sol sommer strand og vand en kvinde og en mand. Glemmer du så husker jeg det ord for ord alting brast men det gør ikke spor minderne har jeg da lov at have dem kan du aldrig nej aldrig tag Husker du de ord vi sammen fandt" />
        </Grid>-->
    </StackPanel>
</Window>

MainWindows.xaml.cs

C#:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace AnsiBug
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            HideSubPanels();           
        }

        public void HideSubPanels()
        {
            ProjectsSubMenu.Visibility = Visibility.Collapsed;           
            ListsSubMenu.Visibility = Visibility.Collapsed;
            PreferencesSubMenu.Visibility = Visibility.Collapsed;
            AdministrationSubMenu.Visibility = Visibility.Collapsed;
            ReportsSubMenu.Visibility = Visibility.Collapsed;
        }

        private void BtnLogout_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }

        private void BtnReports_Click(object sender, RoutedEventArgs e)
        {
            HideSubPanels();
            ReportsSubMenu.Visibility = Visibility.Visible;
        }
    }
}

And finaly App.xaml

C#:
<Application x:Class="AnsiBug.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:AnsiBug"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <!--#region Buttons -->       
        <!--Almindelige knapper-->
        <Style TargetType="Button">
            <Setter Property="Background" Value="#005b7f"/>
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="Margin" Value="3" />
            <Setter Property="Padding" Value="5 5 5 5" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentPresenter x:Name="PART_Content"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          TextElement.Foreground="{TemplateBinding Foreground}"></ContentPresenter>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#005b7f" />
                    <Setter Property="FontWeight" Value="Bold" />
                </Trigger>
            </Style.Triggers>
        </Style>
        
        <!--Top Menu knapper-->
        <Style TargetType="Button" x:Key="TopMenuButton">
            <Setter Property="Background" Value="White"/>
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontSize" Value="12" />           
            <Setter Property="Width" Value="120" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Padding" Value="5 0 2 2" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentPresenter x:Name="PART_Content"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          TextElement.Foreground="{TemplateBinding Foreground}"></ContentPresenter>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="White" />
                    <Setter Property="FontWeight" Value="Bold" />
                </Trigger>
            </Style.Triggers>
        </Style>

        <!--Top SubMenu knapper-->
        <Style TargetType="Button" x:Key="TopSubMenuButton">
            <Setter Property="Background" Value="#005b7f"/>
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="Width" Value="122" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Height" Value="30" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentPresenter x:Name="PART_Content"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          TextElement.Foreground="{TemplateBinding Foreground}"></ContentPresenter>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#005b7f" />
                    <Setter Property="FontWeight" Value="Bold" />
                </Trigger>
            </Style.Triggers>
        </Style>
        <!--#endregion-->
    </Application.Resources>
</Application>
 
Solution
If you really must insist on your current approach, consider using the Popup element which should let you break out of the bounds of the grid cell.
Is there a reason why you are using the built in WPF menu and just restyling it? Why are you trying to do things like the web based approach to building menus?
 
If you really must insist on your current approach, consider using the Popup element which should let you break out of the bounds of the grid cell.
 
Solution
If you really must insist on your current approach, consider using the Popup element which should let you break out of the bounds of the grid cell.
Thank you very much :) I think I found something on google using your tip on popup. I will try that.

Best regard
Simsen :)
 
These two maybe worth reading...

With Windows Presentation Foundation (WPF), you can customize an existing control's visual structure and behavior with your own reusable template. Templates can be applied globally to your application, windows and pages, or directly to controls. Most scenarios that require you to create a new control can be covered by instead creating a new template for an existing control.


 
Back
Top Bottom