0x49D1

0L4g0YDQsNC30YDQsNCx0L7RgtC60LUsINC00LvRjyDRgNCw0LfRgNCw0LHQvtGC0YfQuNC60L7QsiA=

Делаем «metro» заголовок окна как у Zune.


Задача: сделать «современно и красиво».
Точнее: типа так
На самом деле концепт достаточно просто: надо отключить заголовок окна(полностью) и «нарисовать» свой заголовок с другими кнопками.
Для упрощения задачи(а нам тут все надо упрощать, так как я взял за правило как можно больше в этом проекте использовать готового кода) мы используем MahApps.Metro.
Класс окна переопределять не будем, но добавим блок(нужен MahApps!):

   <i:Interaction.Behaviors>
        <Behaviours:BorderlessWindowBehavior/>
    </i:Interaction.Behaviors>

чтоб убрать все окантовки окна и кнопки.
Добавим блок с ресурсами из MahApps:

 <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Icons/MergedResources.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <sys:String x:Key="WindowCommandsMinimiseToolTip">Minimise</sys:String>
            <sys:String x:Key="WindowCommandsMaximiseToolTip">Maximise</sys:String>
            <sys:String x:Key="WindowCommandsRestoreToolTip">Restore</sys:String>
            <sys:String x:Key="WindowCommandsCloseToolTip">Close</sys:String>
        </ResourceDictionary>
    </Window.Resources>

И далее-кастомный заголовок. Основные фишки в нем это стили из MahApps и взаимодействие с Caliburn.Micro(в данный момент о нем я умолчу..)
Приведу тот кусок заголовка, который сейчас находится в коде(со временем он поменяется =)):

<Grid Margin="0,0,0,10">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <TextBlock TextWrapping="Wrap" VerticalAlignment="Top"  FontWeight="Bold" FontSize="10.667" Margin="30,10,0,0"><Run Text="SQLCELogViewer"/></TextBlock>
            <WrapPanel HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal" Margin="30,30,30,10">
                <WrapPanel.Resources>
                    <Style TargetType="Button" BasedOn="{StaticResource ChromelessButtonStyle}">
                        <Setter Property="FontSize" Value="13.333" />
                        <Setter Property="Margin" Value="0,0,20,0" />
                        <Setter Property="FontWeight" Value="Bold" />
                    </Style>
                </WrapPanel.Resources>
                <Button x:Name="OpenLog" Content="OPEN" />
                <Button x:Name="SaveSettings" Content="SAVE SETTINGS" />
            </WrapPanel>
            <WrapPanel HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal" Margin="30,30,30,10">
                <WrapPanel.Resources>
                    <Style TargetType="Button" BasedOn="{StaticResource ChromelessButtonStyle}">
                        <Setter Property="FontSize" Value="13.333" />
                        <Setter Property="Margin" Value="0,0,20,0" />
                        <Setter Property="FontWeight" Value="Bold" />
                    </Style>
                </WrapPanel.Resources>

            </WrapPanel>
            <StackPanel HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10" Orientation="Horizontal">
                <Button x:Name="ShowSettings" Content="SETTINGS" Style="{DynamicResource ChromelessButtonStyle}" FontSize="10.667" Margin="0,0,0,0" FontWeight="Bold" />
                <TextBlock Margin="10,0"><Run Text="|"/></TextBlock>
                <Button x:Name="ShowAbout" Content="ABOUT" Style="{DynamicResource ChromelessButtonStyle}" FontSize="10.667" Margin="0,0,20,0" FontWeight="Bold" />
                <Button Click="ButtonMinimiseOnClick"   ToolTip="{DynamicResource WindowCommandsMinimiseToolTip}" Style="{DynamicResource ChromelessButtonStyle}" Content="0" FontFamily="Marlett" />
                <Button Click="ButtonMaxRestoreOnClick"   ToolTip="{DynamicResource WindowCommandsMaximiseToolTip}" x:Name="maxRestore" Style="{DynamicResource ChromelessButtonStyle}" Content="1" FontFamily="Marlett" />
                <Button x:Name="TryClose" ToolTip="{DynamicResource WindowCommandsCloseToolTip}" Style="{DynamicResource ChromelessButtonStyle}" Content="r" FontFamily="Marlett" />
            </StackPanel>
            <Rectangle HorizontalAlignment="Left" Stroke="Black" Width="10" StrokeThickness="0" Margin="0,10">
                <Rectangle.Fill>
                    <SolidColorBrush Color="{DynamicResource HighlightDarkColor}" />
                </Rectangle.Fill>
            </Rectangle>
///.....second row etc...///

Конечно надо будет обработать события на кастомные кнопки, типа:

        private void ButtonMinimiseOnClick(object sender, RoutedEventArgs e)
        {
            WindowState = WindowState.Minimized;
        }

        private void ButtonMaxRestoreOnClick(object sender, RoutedEventArgs e)
        {
            WindowState = WindowState == WindowState.Maximized ? WindowState.Normal : WindowState.Maximized;
        }

Результат и исходники:
Title

Реклама

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: