none
Trigger 를 이용한 메뉴구성 문의... RRS feed

  • 질문

  • <Window x:Class="MenuTest03.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:MenuTest03"
            mc:Ignorable="d"
            Title="MainWindow" Height="350" Width="525" WindowState="Maximized">
        <Window.Resources>
            <Style x:Key="styleTopMenuMain" TargetType="{x:Type Button}">
                <Setter Property="FontSize" Value="20"/>
                <Setter Property="Foreground" Value="WhiteSmoke"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <!-- Content -->
                            <Grid>
                                <Border x:Name="brdTopMenuMain" Background="#FF232323" Width="Auto" Height="45"/>
                                <ContentPresenter Margin="5,-2,5,0" Width="Auto" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="mnuContent"/>
                            </Grid>

                            <!-- Trigger -->
                            <ControlTemplate.Triggers>
                                <!--IsPressed IsMouseOver-->
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="brdTopMenuMain" Property="Background" Value="White"/>
                                    <Setter TargetName="brdTopMenuMain" Property="BorderBrush" Value="DarkGray"/>
                                    <Setter TargetName="brdTopMenuMain" Property="BorderThickness" Value="1,0,1,0"/>
                                    <Setter Property="Foreground" Value="Black"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="styleTopMenuSub" TargetType="{x:Type Button}">
                <Setter Property="FontSize" Value="18"/>
                <Setter Property="Foreground" Value="Black"/>
                <Setter Property="Background" Value="White"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <!-- Content -->
                            <Grid>
                                <ContentPresenter Width="Auto" HorizontalAlignment="Left" VerticalAlignment="Center" x:Name="mnuContent"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Border Grid.Row="0" Background="#FF232323" Width="Auto" Height="45"/>
            <StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
                <Button x:Name="btnMenu01" Content=" Menu-01 " Style="{StaticResource styleTopMenuMain}" Margin="10,0,10,0"/>
                <Button x:Name="btnMenu02" Content=" Menu-02 " Style="{StaticResource styleTopMenuMain}" Margin="10,0,10,0"/>
                <Button x:Name="btnMenu03" Content=" Menu-03 " Style="{StaticResource styleTopMenuMain}" Margin="10,0,10,0"/>
            </StackPanel>

            <Border Grid.Row="1" x:Name="brdSubmenu01" Height="Auto" Width="Auto" BorderBrush="DarkGray" BorderThickness="1,0,1,1"
                        VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,0,0,0" Panel.ZIndex="0" Visibility="Hidden">
                <StackPanel Orientation="Vertical" Width="Auto" Height="Auto">
                    <Button x:Name="btnMenu01Sub01" Content="Sub Menu-01" Style="{StaticResource styleTopMenuSub}" Margin="18,3,18,3"/>
                    <Button x:Name="btnMenu01Sub02" Content="Sub Menu-02" Style="{StaticResource styleTopMenuSub}" Margin="18,3,18,3" />
                    <Button x:Name="btnMenu01Sub03" Content="Sub Menu-03" Style="{StaticResource styleTopMenuSub}" Margin="18,3,18,3" />
                    <Button x:Name="btnMenu01Sub04" Content="Sub Menu-04" Style="{StaticResource styleTopMenuSub}" Margin="18,3,18,6" />
                </StackPanel>
            </Border>

            <Border Grid.Row="1" x:Name="brdSubmenu02" Height="Auto" Width="Auto" BorderBrush="DarkGray" BorderThickness="1,0,1,1"
                        VerticalAlignment="Top" HorizontalAlignment="Left" Margin="135,0,0,0" Panel.ZIndex="0" Visibility="Hidden">
                <StackPanel Orientation="Vertical" Width="Auto" Height="Auto">
                    <Button x:Name="btnMenu02Sub01" Content="Sub Menu-01" Style="{StaticResource styleTopMenuSub}" Margin="18,3,18,3"/>
                    <Button x:Name="btnMenu02Sub02" Content="Sub Menu-02" Style="{StaticResource styleTopMenuSub}" Margin="18,3,18,3" />
                    <Button x:Name="btnMenu02Sub03" Content="Sub Menu-03" Style="{StaticResource styleTopMenuSub}" Margin="18,3,18,6" />                
                </StackPanel>
            </Border>

            <Border Grid.Row="1" x:Name="brdSubmenu03" Height="Auto" Width="Auto" BorderBrush="DarkGray" BorderThickness="1,0,1,1"
                        VerticalAlignment="Top" HorizontalAlignment="Left" Margin="260,0,0,0" Panel.ZIndex="0" Visibility="Hidden">
                <StackPanel Orientation="Vertical" Width="Auto" Height="Auto">
                    <Button x:Name="btnMenu03Sub01" Content="Sub Menu-01" Style="{StaticResource styleTopMenuSub}" Margin="18,3,18,3"/>
                    <Button x:Name="btnMenu03Sub02" Content="Sub Menu-02" Style="{StaticResource styleTopMenuSub}" Margin="18,3,18,3" />
                    <Button x:Name="btnMenu03Sub03" Content="Sub Menu-03" Style="{StaticResource styleTopMenuSub}" Margin="18,3,18,6" />
                    <Button x:Name="btnMenu03Sub04" Content="Sub Menu-04" Style="{StaticResource styleTopMenuSub}" Margin="18,3,18,6" />
                    <Button x:Name="btnMenu03Sub05" Content="Sub Menu-05" Style="{StaticResource styleTopMenuSub}" Margin="18,3,18,6" />
                    <Button x:Name="btnMenu03Sub06" Content="Sub Menu-06" Style="{StaticResource styleTopMenuSub}" Margin="18,3,18,6" />
                </StackPanel>
            </Border>
        </Grid>
    </Window>

    마우스를 움직여서 MouseMove가 발생했을때 해당되는 Sub Menu 를 보이고, 선택할 수 있도록 하려고 합니다.
    궁금한 부분은.
    1. 제일 위에 Menu-01, Menu-02, Menu-03은 Trigger를 이용해서 IsMouseOver = True 인경우 배경을 바꾸기는 했지만
       여기서 아래 서브 메뉴가 나오게 하려면 어떻게 해야 하는지 궁금합니다.
    2. 
    btnMenu01 의 MouseMove 이벤트에 brdSubmenu01.Visibility 를 Visible로 설정했더니 Sub 메뉴로 마우스를 옮겼을 때
       Trigger 때문에 btnMenu01 의 배경이 다시 어두운색으로 변합니다. 
       brdSubmenu01 메뉴에서 마우스가 움직여도 btnMenu01의 배경을 기존 White 로 유지하는 방법은 없을까요?
    3. brdSubmenu들의 왼쪽 위치를 각 Main Menu의 왼쪽과 동일하게 쉽게 설정하는 방법이 있을까요?
    4. 제가 이 메뉴 구성 방법의 방향을 제대로 잡은건가요...? ㅠㅠ

    조언을 부탁드립니다.
    감사합니다.

                
    2016년 1월 27일 수요일 오전 9:14