WPF Net Framework 3.5窗口Metro风格

时间:2013-10-12 14:35:47

标签: wpf .net-3.5 microsoft-metro mahapps.metro modern-ui

我想用Metro风格制作Window。


我找到了以下3个库:

http://elysium.asvishnyakov.com/en/

https://github.com/MahApps/MahApps.Metro

http://mui.codeplex.com/

所有内容均适用于Net Framework 4+ 3.5还有什么东西吗?

我也尝试自己完成它(Didnt完成 - 仍然需要设计它并添加Resize [我不知道如何])但我真的不喜欢它是如何制作的......:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit" x:Class="Windows_Hider.MainWindow"
        Title="Windows Hider" Height="350" Width="525" WindowStartupLocation="CenterScreen" 
        AllowsTransparency="True"
    ResizeMode="CanResize" WindowStyle="None" BorderBrush="Black" BorderThickness="1" Icon="windowshider.ico">
    <Grid>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top">
                <Image Width="24" Height="24" Source="{Binding Icon, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}"/>
                <Label VerticalAlignment="Center" FontSize="14" Content="{Binding Title, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}"/>
            </StackPanel>
            <Grid MouseDown="Grid_MouseDown" Background="Transparent"/>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" Grid.Row="0">
                <Button ToolTip="minimize" Background="White">
                    <Grid Width="30" Height="25">
                        <TextBlock Text="0" FontFamily="Marlett" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="3.5,0,0,3" />
                    </Grid>
                </Button>
                <Grid Margin="1,0,1,0">
                    <Button x:Name="Restore"  ToolTip="restore" Visibility="Collapsed">
                        <Grid Width="30" Height="25" UseLayoutRounding="True">
                            <TextBlock Text="2" FontFamily="Marlett" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="2,0,0,1" />
                        </Grid>
                    </Button>
                    <Button x:Name="Maximize" ToolTip="maximize">
                        <Grid Width="31" Height="25">
                            <TextBlock Text="1" FontFamily="Marlett" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="2,0,0,1" />
                        </Grid>
                    </Button>
                </Grid>
                <Button  x:Name="Close" ToolTip="close">
                    <Grid Width="30" Height="25">
                        <TextBlock Text="r" FontFamily="Marlett" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="0,0,0,1" />
                    </Grid>
                </Button>
            </StackPanel>
        </Grid>
    </Grid>
</Window>

2 个答案:

答案 0 :(得分:2)

好的,我花了几天时间,但最后我成功了。

我必须亲自制作,因为Net Framework 3.5没有Metro Window。

我结合了下面的一些参考文献:

Launch window's System Menu on custom window

http://www.codeproject.com/Articles/107994/Taskbar-with-Window-Maximized-and-WindowState-to-N

http://blog.magnusmontin.net/2013/03/16/how-to-create-a-custom-window-in-wpf/

http://codekong.wordpress.com/2010/11/10/custom-window-style-and-accounting-for-the-taskbar/

http://blog.creativeitp.com/posts-and-articles/c-sharp/simple-methods-to-drag-and-resize-your-c-transparent-wpf-application-with-the-windowstyle-property-set-to-none/



this is the final solution

已知问题/错误:
1.当调整箭头光标的大小而不是调整大小光标时 2.设计师无法显示自定义窗口 3.最大化时,在屏幕的大区域内随机出现蓝色(边框的颜色) - 瞬间显示

如果您能解决上述任何问题,那将会更好,但我对我所取得的成就感到满意。

修改
已更新以允许调整大小模式(也添加了样本)

答案 1 :(得分:1)

自己这样做相对容易......您需要做的就是复制Style用户界面中显示的Metro。首先,这是一个非常简单的Style,可以更改ControlTemplate元素的Button以删除其默认外观:

<Style TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <ContentPresenter HorizontalAlignment="Center" 
                        VerticalAlignment="Center" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

当然,当用户将鼠标指针移到Button上时,你会想要发生一些事情,你可以通过将VisualStateManager.VisualStateGroups添加到ControlTemplate来实现。您可以在MSDN上的ControlTemplate Class页面找到完整的相关示例。

其他控件Metro - 样式控件可以通过以相同方式创建简单ControlTemplate来轻松开发。基本上,您只需要删除默认的WPF外观,并且在大多数情况下,只需将其替换为上面示例中的ContentPresenter或集合控件的ItemsPresenter。幸运的是Metro看起来非常简单明了,只要记住要保持一切都是平和的。

要解决另一个你为调整大小而烦恼的观点;您可以将Window.ResizeMode属性设置为CanResizeWithGrip,以便在Window的右下角添加调整大小手柄,这在这些应用程序中经常会出现。