17

May i know how to set the window style or color? The image below is my WPF enter image description here

I want to set my window become something like the app below:

enter image description here

Thanks.

Nerdynosaur
  • 1,798
  • 9
  • 32
  • 61

2 Answers2

15

As far as I can remember (It is more than 4 years ago), you can create a style to use with a WPF window.

This is a sample window Style:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
                      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Style x:Key="MainWindow" 
           TargetType="{x:Type Window}"> 
        <Setter Property="Foreground" 
                Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" /> 
        <Setter Property="Template"> 
            <Setter.Value> 
                <ControlTemplate TargetType="{x:Type Window}"> 
                    <Grid> 
                        <Border x:Name="MainBorder" 
                                BorderBrush="{DynamicResource MainWindowBorderBrush}" 
                                BorderThickness="1" 
                                CornerRadius="2" 
                                Background="{DynamicResource MainWindowBackgroundBrush}"> 
                            <DockPanel LastChildFill="True"> 
                                <Rectangle x:Name="PART_LEFT_BORDER" 
                                           Width="2" 
                                           Cursor="SizeWE"> 
                                    <Rectangle.Fill> 
                                        <SolidColorBrush Color="Transparent" /> 
                                    </Rectangle.Fill> 
                                </Rectangle> 
                                <Rectangle x:Name="PART_RIGHT_BORDER" 
                                           Cursor="SizeWE" 
                                           Width="2" 
                                           DockPanel.Dock="Right"> 
                                    <Rectangle.Fill> 
                                        <SolidColorBrush Color="Transparent" /> 
                                    </Rectangle.Fill> 
                                </Rectangle> 
                                <Rectangle x:Name="PART_TOP_BORDER" 
                                           Cursor="SizeNS" 
                                           DockPanel.Dock="Top" 
                                           Height="2"> 
                                    <Rectangle.Fill> 
                                        <SolidColorBrush Color="Transparent" /> 
                                    </Rectangle.Fill> 
                                </Rectangle> 
                                <Rectangle x:Name="PART_BOTTOM_BORDER" 
                                           Cursor="SizeNS" 
                                           Height="2" 
                                           DockPanel.Dock="Bottom"> 
                                    <Rectangle.Fill> 
                                        <SolidColorBrush Color="Transparent" /> 
                                    </Rectangle.Fill> 
                                </Rectangle> 
                                <Border x:Name="PART_TITLEBAR" 
                                        Margin="2,0,2,2" 
                                        Height="40" 
                                        DockPanel.Dock="Top" 
                                        CornerRadius="2" 
                                        Background="Transparent"> 
                                    <DockPanel LastChildFill="False"> 
                                        <TextBlock Margin="8,0,0,4" 
                                                   VerticalAlignment="Center" 
                                                   FontStretch="UltraExpanded" 
                                                   Foreground="Black" 
                                                   TextTrimming="CharacterEllipsis" 
                                                   TextWrapping="NoWrap" 
                                                   Text="{TemplateBinding Title}" 
                                                   FontSize="16" /> 
                                        <Button x:Name="PART_CLOSE" 
                                                DockPanel.Dock="Right" 
                                                Style="{DynamicResource FlatButton}" 
                                                VerticalAlignment="Center" 
                                                Margin="0,0,4,0"> 
                                            <Image Source="/MixModes.Synergy.Resources;
                        component/Resources/Close.png" 
                                                   Stretch="None" 
                                                   Margin="4" /> 
                                        </Button> 
                                        <Button x:Name="PART_MAXIMIZE_RESTORE" 
                                                DockPanel.Dock="Right" 
                                                HorizontalAlignment="Center" 
                                                VerticalAlignment="Center" 
                                                Style="{DynamicResource FlatButton}"> 
                                            <Image x:Name="MaximizeRestoreImage" 
                                                   Source="/MixModes.Synergy.Resources;
                        component/Resources/Restore.png" 
                                                   Stretch="None" 
                                                   Margin="4" /> 
                                        </Button> 
                                        <Button x:Name="PART_MINIMIZE" 
                                                HorizontalAlignment="Center" 
                                                Style="{DynamicResource FlatButton}" 
                                                VerticalAlignment="Center" 
                                                DockPanel.Dock="Right"> 
                                            <Image Margin="4" 
                                                   Source="/MixModes.Synergy.
                        Resources;component/Resources/
                        Minimize.png" 
                                                   Stretch="None" /> 
                                        </Button> 
                                    </DockPanel> 
                                </Border>

                                <!-- Title bar separator--> 
                                <Border Height="1" 
                                        DockPanel.Dock="Top" 
                                        Background="{DynamicResource 
                    MainWindowTitleBarSeparator}" />

                                <!-- Actual Window Content --> 
                                <AdornerDecorator DockPanel.Dock="Bottom"> 
                                    <ContentPresenter /> 
                                </AdornerDecorator> 
                            </DockPanel> 
                        </Border> 
                    </Grid> 
                    <ControlTemplate.Triggers>                        
                        <DataTrigger Binding="{Binding RelativeSource=
                {RelativeSource Self}, Path=Maximized}" 
                                     Value="False"> 
                            <Setter TargetName="MaximizeRestoreImage" 
                                    Property="Source" 
                                    Value="/MixModes.Synergy.Resources;
                component/Resources/Maximize.png" /> 
                        </DataTrigger> 
                    </ControlTemplate.Triggers> 
                </ControlTemplate> 
            </Setter.Value> 
        </Setter> 
    </Style> 
</ResourceDictionary>

And the result will look like this:

http://www.codeproject.com/KB/WPF/CustomWPFWindow/8.png

Read more on Create Custom Windows in WPF with Ease

Ekk
  • 5,627
  • 19
  • 27
8

You can use the XAML below to achieve rounded corner windows in WPF, the problem with this approach is you'll have to implement your own buttons for Minimize,Maximize and Close.

Fortunately there is a library on code plex which does all this for you

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    AllowsTransparency="True"
    WindowStyle="None"
    Padding="0"
    WindowStartupLocation="CenterScreen" Height="200" Width="200" >
    <Border BorderBrush="Blue" BorderThickness="2" CornerRadius="6" >
    </Border>
</Window>
Denys Wessels
  • 16,829
  • 14
  • 80
  • 120
  • 1
    This library does not seem good. I suggest using WPF Custom Chrome Library. That way you can retain GPU acceleration while using "fully-custom-chrome" window. – Erti-Chris Eelmaa Nov 01 '12 at 06:32