天天看點

WPF自定義窗體

1、對窗體設計樣式

<Style x:Key="BaseMainWindowStyle"  TargetType="Window">
        <Setter Property="Padding" Value="0" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="Background"  Value="{DynamicResource MainBackground}" />
        <Setter Property="WindowStyle" Value="None" />
        <Setter Property="AllowsTransparency" Value="True"  />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Window">
                    <Border
                        Background="{DynamicResource  MainBackground}"
                        BorderBrush="Gray"
                        BorderThickness="1"
                        SnapsToDevicePixels="True">
                        <Border.Effect>
                            <DropShadowEffect BlurRadius="10"  Color="Black" />
                        </Border.Effect>
                        <ContentPresenter />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
           

注意點:

① WindowStyle="None"時,如果不設定AllowsTransparency="True",運作後窗體上邊框和内容之間有空餘留白,需要設定AllowsTransparency="True"

② 在資源檔案中設定WindowStyle="None",對設計視圖中的窗體不起作用,可在設計視圖中重新設定WindowStyle="None"(原因暫時不明)

2、在窗體上方添加Grid提供拖拽,關閉等操作

<Grid MouseLeftButtonDown="Grid_MouseLeftButtonDown"  Style="{DynamicResource TitleBarStyle}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="30" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="100" />
            </Grid.ColumnDefinitions>
            <Image
                x:Name="ImgIcon"
                Margin="1"
                 MouseLeftButtonDown="ImgIcon_MouseLeftButtonDown"
                Source="/Assets/Images/mine.png" />
            <TextBlock
                Grid.Column="1"
                VerticalAlignment="Center"
                Foreground="Black"
                Text="{DynamicResource AppTitle}" />
            <StackPanel
                Grid.Column="2"
                HorizontalAlignment="Right"
                VerticalAlignment="Center"
                Orientation="Horizontal">
                <Button
                    x:Name="btnMinimize"
                    Command="{Binding MinimizeCommand}"
                    Style="{DynamicResource  WindowButtonStyle}">
                    <Image  Source="/Assets/Images/minimize.png" />
                </Button>
                <Button
                    Command="{Binding MaxmizeCommand}"
                    Style="{DynamicResource  WindowButtonStyle}"
                    Visibility="Collapsed">
                    <Image Source="{Binding WindowState,  RelativeSource={RelativeSource Mode=FindAncestor,  AncestorType=Window}, Converter={StaticResource  MaxmizeButtongImageConverter}}" />
                </Button>
                <Button Command="{Binding CloseCommand}"  Style="{DynamicResource WindowButtonStyle}">
                    <Image Source="/Assets/Images/close.png"  />
                </Button>
            </StackPanel>
        </Grid>
           

CodeBehind代碼

private void Grid_MouseLeftButtonDown(object  sender, MouseButtonEventArgs e)
        {
            if (e.ClickCount == 1)
            {
                this.DragMove();
            }
            else if (e.ClickCount > 1)
            {
                //if (WindowState != WindowState.Maximized)
                //{
                //    this.WindowState =  WindowState.Maximized;
                //}
                //else
                //{
                //    this.WindowState = WindowState.Normal;
                //}
            }
        }
           

MainViewModel代碼

private RelayCommand minimizeCommand;
        /// <summary>
        /// Gets the MyCommand.
        /// </summary>
        public RelayCommand MinimizeCommand
        {
            get
            {
                return minimizeCommand
                    ?? (minimizeCommand = new RelayCommand(
                    () =>
                    {
                         Application.Current.MainWindow.WindowState =  WindowState.Minimized;
                    }));
            }
        }
        private RelayCommand maxMizeCommand;
        /// <summary>
        /// Gets the MaxmizeCommand.
        /// </summary>
        public RelayCommand MaxmizeCommand
        {
            get
            {
                return maxMizeCommand
                    ?? (maxMizeCommand = new RelayCommand(
                    () =>
                    {
                        if  (Application.Current.MainWindow.WindowState ==  WindowState.Maximized)
                        {
                             Application.Current.MainWindow.WindowState =  WindowState.Normal;
                        }
                        else
                        {
                             Application.Current.MainWindow.WindowState =  WindowState.Maximized;
                        }
                    }));
            }
        }
        private RelayCommand closeCommand;
        /// <summary>
        /// Gets the CloseCommand.
        /// </summary>
        public RelayCommand CloseCommand
        {
            get
            {
                return closeCommand
                    ?? (closeCommand = new RelayCommand(
                    () =>
                    {
                        Application.Current.Shutdown();
                    }));
            }
        }
           

參考界面:

WPF自定義窗體