5

私は WPF が初めてで、アプリの横方向のメニューを作成したいと考えています。アイデアを探していたら、こんな写真を見つけました。

モダンメニュー

私の考えは、写真のようなボタンを次々と追加することです。ユーザーがボタンをクリックすると、ボタンが展開されてサブメニューオプションが表示されます。一度に展開できるメニューは 1 つだけです。私の最初のテストは、リストボックスを使用することです。内部では、各ボタンにエキスパンダーを使用し、次にスタックパネルを使用してサブメニューオプションを追加します。次のようになります。

私の最初のテスト

これは私のXAMLです:

<Window x:Class="InterfazOhmio.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Background="Gray">    
    <Grid>       
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <ListBox>
            <ListBox.Resources>
                <Style TargetType="{x:Type Expander}">
                    <Setter Property="IsExpanded"
           Value="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
                </Style>
            </ListBox.Resources>
            <ListBox.Template>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <ItemsPresenter/>
                </ControlTemplate>
            </ListBox.Template>
            <ListBox.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <ContentPresenter Content="{TemplateBinding Content}"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>

            <Expander Background="GreenYellow"  Width="243" Header="Pedidos">                
                <StackPanel>                    
                    <RadioButton Margin="20,5,5,5" Content="Nuevo Pedido" GroupName="Two"/>
                    <RadioButton Margin="20,5,5,5" Content="Consultar Pedidos" GroupName="Two"/>
                    <RadioButton Margin="20,5,5,5" Content="Pedidos Pendientes" GroupName="Two"/>
                </StackPanel>
            </Expander>
            <Expander Background="BurlyWood" Width="243" Header="Remitos" Expanded="Expander_Expanded">
                <StackPanel>
                    <RadioButton Content="Nuevo Remito" GroupName="Two"/>
                    <RadioButton Content="Consulta de Remitos" GroupName="Two"/>
                    <RadioButton Content="Remitos Pendientes de Facturar" GroupName="Two"/>
                </StackPanel>
            </Expander>
            <Expander Background="OrangeRed" Width="243" Header="Facturas de Ventas">
                <StackPanel>
                    <RadioButton Content="Nueva Factura" GroupName="Two"/>
                    <RadioButton Content="Consulta Facturas" GroupName="Two"/>                    
                </StackPanel>
            </Expander>
        </ListBox>        
    </Grid>    
</Window>

したがって、私が望んでいた動作をしていますが、外観はあまり似ていません。これを改善して最初の画像のようにするにはどうすればよいですか? ありがとう！

アップデート

私が望むのは、上記のボタンのようなすべてのグループ タイトルの横にアイコンを追加し、理想的には展開アイコンを置き換えてから、RadioButtons を Hyperlinks に置き換えることです。ありがとう！

4

1 に答える 1

14

いくつかのテストの後、私はそれを手に入れました!!!! 他の人が使用できるようにソリューションを投稿します。

<Window x:Class="InterfazOhmio.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Background="Gray">    
    <Grid>       
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <ListBox ScrollViewer.VerticalScrollBarVisibility="Auto">
            <ListBox.Resources>
                <Style TargetType="{x:Type Expander}">
                    <Setter Property="IsExpanded"
           Value="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
                </Style>
            </ListBox.Resources>
            <ListBox.Template>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <ItemsPresenter/>
                </ControlTemplate>
            </ListBox.Template>
            <ListBox.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <ContentPresenter Content="{TemplateBinding Content}"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>            

            <Expander Background="OliveDrab">                
                <Expander.Header>
                    <BulletDecorator>
                        <BulletDecorator.Bullet>
                            <Image Source="Iconos/Pedidos.png" Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />                            
                        </BulletDecorator.Bullet>                        
                        <TextBlock Margin="10,0,0,0" Text="Pedidos" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
                    </BulletDecorator>
                </Expander.Header>
                <WrapPanel>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Nuevo Pedido"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Consultar Pedidos"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Pedidos Pendientes"/>                    
                </WrapPanel>
            </Expander>

            <Expander Background="OrangeRed">
                <Expander.Header>
                    <BulletDecorator>
                        <BulletDecorator.Bullet>
                            <Image Source="Iconos/Remitos.png" Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
                        </BulletDecorator.Bullet>
                        <TextBlock Margin="10,0,0,0" Text="Remitos" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
                    </BulletDecorator>
                </Expander.Header>
                <WrapPanel>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Nuevo Remito"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Consultar Remitos"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Remitos Pendientes de Facturar"/>
                </WrapPanel>
            </Expander>

            <Expander Background="Teal">
                <Expander.Header>
                    <BulletDecorator>
                        <BulletDecorator.Bullet>
                            <Image Source="Iconos/Facturas.png" Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
                        </BulletDecorator.Bullet>
                        <TextBlock Margin="10,0,0,0" Text="Facturas" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
                    </BulletDecorator>
                </Expander.Header>
                <WrapPanel>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Nueva Factura"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Consultar Facturas Normales y Anuladas"/>                    
                </WrapPanel>
            </Expander>          

        </ListBox>        
    </Grid>    
</Window>

そして、これが結果です

結果

于 2014-04-02T18:25:37.080 に答える