久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

如何在 WPF 中創建具有 Microsoft Web 應用程序樣式的

How to create a menu in WPF that has Microsoft Web Application styling(如何在 WPF 中創建具有 Microsoft Web 應用程序樣式的菜單)
本文介紹了如何在 WPF 中創建具有 Microsoft Web 應用程序樣式的菜單的處理方法,對大家解決問題具有一定的參考價值,需要的朋友們下面隨著小編來一起學習吧!

問題描述

我們的任務是在 WPF 中設計一個企業應用程序,該應用程序將取代戰艦灰色 Winforms 應用程序,使其具有現代感.

我們喜歡 Microsoft Web 應用程序當前擁有的外觀和感覺:

我們可以用通常的方式在 WPF 中創建這些菜單:

<Menu DockPanel.Dock="Top"><MenuItem Header="_File"><MenuItem Header="_New"/><MenuItem Header="_Open"/><MenuItem Header="_Save"/><分隔符/><MenuItem Header="_Exit"/></菜單項></菜單><TextBox AcceptsReturn="True"/></DockPanel>

但我們會得到一些看起來像 Winforms 菜單的東西.

我見過一些相當令人印象深刻的樣式設計,例如

這是 XAML.我選擇為每個 MenuItem 使用自定義控件模板.我認為當您需要真正自定義每個項目時,它非常實用.

<窗口.資源><BooleanToVisibilityConverter x:Key="btv"/><!-- 設置頂級菜單項的樣式--><ControlTemplate x:Key="VsMenuTop" TargetType="MenuItem"><StackPanel TextBlock.FontSize="15px" Height="40"><!-- 標簽、圖標等--><Label Content="{TemplateBinding Header}" Margin="5" Foreground="White"/><!-- 子項目--><Popup IsOpen="{TemplateBinding IsSubmenuOpen}" AllowsTransparency="True" Focusable="False"><Border BorderThickness="1" Background="White" BorderBrush="#E0E0E0"><StackPanel IsItemsHost="True"/></邊框></彈出窗口><StackPanel.Style><Style TargetType="StackPanel"><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#106EBE"/></觸發器></Style.Triggers></風格></StackPanel.Style></StackPanel></控制模板><!-- 設置非頂級菜單項的樣式--><ControlTemplate x:Key="VsMenuSub" TargetType="MenuItem"><DockPanel TextBlock.FontSize="15px" x:Name="panel"><!-- 標簽、圖標等--><Image Source="{Binding Icon, RelativeSource={RelativeSource TemplatedParent}}" Width="20" Margin="5,0"/><Label Content="{TemplateBinding Header}" Foreground="Black" Margin="0,5,5,5"/><!-- 僅當此菜單項有子項時才繪制向右箭頭 --><Image Source="icon_right.png" Visibility="{Binding HasItems, Converter={StaticResource btv}, RelativeSource={RelativeSource TemplatedParent}}"/><!-- 子項目--><Popup IsOpen="{TemplateBinding IsSubmenuOpen}" AllowsTransparency="True" Focusable="False" Placement="Right" ><Border BorderThickness="1" Background="White" BorderBrush="#E0E0E0"><StackPanel IsItemsHost="True"/></邊框></彈出窗口></DockPanel><ControlTemplate.Triggers><Trigger Property="IsHighlighted" Value="True"><Setter Property="Background" TargetName="panel" Value="#EFF6FC"/></觸發器></ControlTemplate.Triggers></控制模板><!-- 設置分隔符的樣式--><ControlTemplate x:Key="VsMenuSep" TargetType="分隔符"><邊框高度="1" 背景="#E0E0E0"/></控制模板><!-- 設置 VSOnline 的樣式--><ControlTemplate x:Key="VsOnline" TargetType="MenuItem"><StackPanel TextBlock.FontSize="15px" Height="40" Orientation="Horizo??ntal" Background="#005A9E"><Label Content="{TemplateBinding Header}" Margin="5" Foreground="White"/><Image Source="icon_down.png" Height="20" Margin="0,0,5,0"/><!-- 子項目--><Popup IsOpen="{TemplateBinding IsSubmenuOpen}" AllowsTransparency="True" Focusable="False"><Border BorderThickness="1" Background="White" BorderBrush="#E0E0E0"><StackPanel IsItemsHost="True"/></邊框></彈出窗口></StackPanel></控制模板><!-- 一些基本的東西--><Style TargetType="菜單"><Setter Property="Background" Value="#0078D7"/><Setter Property="Height" Value="40px"/></風格></Window.Resources><!-- 真正的應用程序和真正的菜單--><堆棧面板><Menu IsMainMenu="True"><MenuItem Header="_VSOnline" Template="{StaticResource VsOnline}" ><MenuItem Header="_Whatever" Template="{StaticResource VsMenuSub}"/></菜單項><MenuItem Header="_Dashboards" Template="{StaticResource VsMenuTop}"><MenuItem Header="_Overview" Template="{StaticResource VsMenuSub}"/></菜單項><MenuItem Header="_Code" Template="{StaticResource VsMenuTop}"><MenuItem Header="_Files" Template="{StaticResource VsMenuSub}"/><MenuItem Header="_Commits" Template="{StaticResource VsMenuSub}"/><MenuItem Header="_Pushes" Template="{StaticResource VsMenuSub}"/></菜單項><MenuItem Header="_Work" Template="{StaticResource VsMenuTop}"><MenuItem Header="_Backlogs" Template="{StaticResource VsMenuSub}" Icon="icon_backlogs.png"/><MenuItem Header="_Queries" Template="{StaticResource VsMenuSub}" Icon="icon_queries.png"/><Separator Template="{StaticResource VsMenuSep}"/><MenuItem Header="_New Work Item" Template="{StaticResource VsMenuSub}"><MenuItem Header="_Epic" Template="{StaticResource VsMenuSub}" Icon="icon_epic.png"/><MenuItem Header="_Feature" Template="{StaticResource VsMenuSub}" Icon="icon_feature.png"/><MenuItem Header="_Issue" Template="{StaticResource VsMenuSub}" Icon="icon_issue.png"/><MenuItem Header="_Task" Template="{StaticResource VsMenuSub}" Icon="icon_task.png"/><MenuItem Header="_Test Case" Template="{StaticResource VsMenuSub}" Icon="icon_testcase.png"/><MenuItem Header="_User Story" Template="{StaticResource VsMenuSub}" Icon="icon_userstory.png"/></菜單項><MenuItem Header="_Bug" Template="{StaticResource VsMenuSub}" Icon="icon_bug.png"/></菜單項></菜單></StackPanel></窗口>

該項目可在 此處在 github 上獲得.

We have been tasked with designing an enterprise application in WPF that will replace a battleship grey Winforms application with a modern look and feel.

We like the look and feel that Microsoft web applications currently possess:

We could create these menus in WPF in the usual way:

<DockPanel>
    <Menu DockPanel.Dock="Top">
        <MenuItem Header="_File">
            <MenuItem Header="_New" />
            <MenuItem Header="_Open" />
            <MenuItem Header="_Save" />
            <Separator />
            <MenuItem Header="_Exit" />
        </MenuItem>
    </Menu>
    <TextBox AcceptsReturn="True" />
</DockPanel>

But we'd get something that looks like a Winforms menu.

I've seen some rather impressive styling efforts like this one, but they all seem to have the same familiar Winforms shape. I've also seen menus in libraries like MahApps Metro, but these strike us as too spartan.

Is the WPF Menu control flexible enough to be styled as shown in the picture above, or should we go another route like building a custom menu control from Stack Panels and Lists? What are the tradeoffs?

Bonus points (i.e. a bounty) will be awarded for xaml/code that does exactly this.

An example of this menu style in action:
https://www.visualstudio.com/

解決方案

WPF was really designed with the possibility to change the look and behavior of every out-of-the-box mechanisms / controls (buttons, menus, treeview, etc.). So, in general, it's better to do this rather than to rewrite everything. For example, if you redesign your custom menu, you'll have to think about keyboard, UI automation, etc...

So, I gave a shot at your example and tried to build a minimum working sample - pure XAML - that mimics VS online menu (I've also added the hover background color change that's not by default in WPF's menu).

Here is the result and, as you see, it looks very similar:

Here is the XAML. I've chosen to use a custom control template per each MenuItem. I think it's quite practical when you need to really customize every item.

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="550" Width="525">
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="btv" />

        <!-- style a top level menu item -->
        <ControlTemplate x:Key="VsMenuTop" TargetType="MenuItem">
            <StackPanel TextBlock.FontSize="15px" Height="40">
                <!-- label, icons, etc. -->
                <Label Content="{TemplateBinding Header}" Margin="5" Foreground="White" />

                <!-- sub items -->
                <Popup IsOpen="{TemplateBinding IsSubmenuOpen}" AllowsTransparency="True" Focusable="False">
                    <Border BorderThickness="1" Background="White" BorderBrush="#E0E0E0">
                        <StackPanel IsItemsHost="True" />
                    </Border>
                </Popup>
                <StackPanel.Style>
                    <Style TargetType="StackPanel">
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver"  Value="True">
                                <Setter Property="Background" Value="#106EBE" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </StackPanel.Style>
            </StackPanel>
        </ControlTemplate>

        <!-- style a non-top level menu item -->
        <ControlTemplate x:Key="VsMenuSub" TargetType="MenuItem">
            <DockPanel TextBlock.FontSize="15px" x:Name="panel">
                <!-- label, icons, etc. -->
                <Image Source="{Binding Icon, RelativeSource={RelativeSource TemplatedParent}}" Width="20" Margin="5,0" />
                <Label Content="{TemplateBinding Header}" Foreground="Black" Margin="0,5,5,5" />

                <!-- draw the right arrow only if this menu item has sub items -->
                <Image Source="icon_right.png" Visibility="{Binding HasItems, Converter={StaticResource btv}, RelativeSource={RelativeSource TemplatedParent}}" />

                <!-- sub items -->
                <Popup IsOpen="{TemplateBinding IsSubmenuOpen}" AllowsTransparency="True" Focusable="False" Placement="Right" >
                    <Border BorderThickness="1" Background="White" BorderBrush="#E0E0E0">
                        <StackPanel IsItemsHost="True" />
                    </Border>
                </Popup>
            </DockPanel>
            <ControlTemplate.Triggers>
                <Trigger Property="IsHighlighted" Value="True">
                    <Setter Property="Background" TargetName="panel" Value="#EFF6FC" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <!-- style the separator -->
        <ControlTemplate x:Key="VsMenuSep" TargetType="Separator">
            <Border Height="1" Background="#E0E0E0" />
        </ControlTemplate>

        <!-- style the VSOnline -->
        <ControlTemplate x:Key="VsOnline" TargetType="MenuItem">
            <StackPanel TextBlock.FontSize="15px" Height="40" Orientation="Horizontal" Background="#005A9E">
                <Label Content="{TemplateBinding Header}" Margin="5" Foreground="White" />
                <Image Source="icon_down.png" Height="20" Margin="0,0,5,0" />

                <!-- sub items -->
                <Popup IsOpen="{TemplateBinding IsSubmenuOpen}" AllowsTransparency="True" Focusable="False">
                    <Border BorderThickness="1" Background="White" BorderBrush="#E0E0E0">
                        <StackPanel IsItemsHost="True" />
                    </Border>
                </Popup>
            </StackPanel>
        </ControlTemplate>

        <!-- some base stuff -->
        <Style TargetType="Menu">
            <Setter Property="Background" Value="#0078D7" />
            <Setter Property="Height" Value="40px" />
        </Style>

    </Window.Resources>

    <!-- the real app and real menu -->
    <StackPanel>
        <Menu IsMainMenu="True">
            <MenuItem Header="_VSOnline" Template="{StaticResource VsOnline}" >
                <MenuItem Header="_Whatever" Template="{StaticResource VsMenuSub}" />
            </MenuItem>
            <MenuItem Header="_Dashboards" Template="{StaticResource VsMenuTop}">
                <MenuItem Header="_Overview" Template="{StaticResource VsMenuSub}" />
            </MenuItem>
            <MenuItem Header="_Code" Template="{StaticResource VsMenuTop}">
                <MenuItem Header="_Files" Template="{StaticResource VsMenuSub}" />
                <MenuItem Header="_Commits" Template="{StaticResource VsMenuSub}" />
                <MenuItem Header="_Pushes" Template="{StaticResource VsMenuSub}" />
            </MenuItem>
            <MenuItem Header="_Work" Template="{StaticResource VsMenuTop}">
                <MenuItem Header="_Backlogs" Template="{StaticResource VsMenuSub}" Icon="icon_backlogs.png" />
                <MenuItem Header="_Queries" Template="{StaticResource VsMenuSub}" Icon="icon_queries.png" />
                <Separator Template="{StaticResource VsMenuSep}" />
                <MenuItem Header="_New Work Item" Template="{StaticResource VsMenuSub}">
                    <MenuItem Header="_Epic" Template="{StaticResource VsMenuSub}" Icon="icon_epic.png" />
                    <MenuItem Header="_Feature" Template="{StaticResource VsMenuSub}" Icon="icon_feature.png" />
                    <MenuItem Header="_Issue" Template="{StaticResource VsMenuSub}" Icon="icon_issue.png" />
                    <MenuItem Header="_Task" Template="{StaticResource VsMenuSub}" Icon="icon_task.png" />
                    <MenuItem Header="_Test Case" Template="{StaticResource VsMenuSub}" Icon="icon_testcase.png" />
                    <MenuItem Header="_User Story" Template="{StaticResource VsMenuSub}" Icon="icon_userstory.png" />
                </MenuItem>
                <MenuItem Header="_Bug" Template="{StaticResource VsMenuSub}" Icon="icon_bug.png" />
            </MenuItem>
        </Menu>
    </StackPanel>
</Window>

The project is available here on github.

這篇關于如何在 WPF 中創建具有 Microsoft Web 應用程序樣式的菜單的文章就介紹到這了,希望我們推薦的答案對大家有所幫助,也希望大家多多支持html5模板網!

【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題,如果有圖片或者內容侵犯了您的權益,請聯系我們刪除處理,感謝您的支持!

相關文檔推薦

LINQ to SQL and Concurrency Issues(LINQ to SQL 和并發問題)
Yield return from a try/catch block(try/catch 塊的收益回報)
Should I call Parameters.Clear when reusing a SqlCommand with a transation?(重用帶有事務的 SqlCommand 時,我應該調用 Parameters.Clear 嗎?)
what does a using statement without variable do when disposing?(處理時不帶變量的 using 語句有什么作用?)
Why doesn#39;t TransactionScope work with Entity Framework?(為什么 TransactionScope 不適用于實體框架?)
How to dispose TransactionScope in cancelable async/await?(如何在可取消的 async/await 中處理 TransactionScope?)
主站蜘蛛池模板: 国产一区三区在线 | 日韩资源 | 色综合一区二区 | 九九热在线免费视频 | 99久久影院 | 一级毛片中国 | 91婷婷韩国欧美一区二区 | 欧美成人精品一区二区三区 | 一级大片 | 精品国产欧美一区二区三区成人 | 9久久婷婷国产综合精品性色 | 天天夜夜人人 | 2021天天躁夜夜看 | 欧美电影免费观看 | 亚洲第一中文字幕 | 午夜影院在线观看 | 亚洲精品日本 | 国产精品一二三区 | 日韩精品久久久久 | 亚洲国产欧美日韩 | 久久毛片 | 毛片免费看的 | 日韩综合网 | 草久久| h肉视频| 日韩久久成人 | 日韩久久网 | 欧美电影一区 | 久久国产高清 | 欧洲性生活视频 | 九九热在线精品视频 | 国产精品久久久久久妇女6080 | 欧美成人一区二区 | 精品国产99 | 亚洲欧美精品久久 | 中文字幕在线视频一区二区三区 | 麻豆精品一区二区三区在线观看 | 亚洲天堂精品久久 | 国产一级片在线播放 | 亚洲精品免费视频 | 91香蕉|