9

У приложения есть стандартные кнопки свернуть и закрыть. Но меня они не устраивают. Нужно сделать свои кнопки. Поставил задачу сделать кнопки с прозрачным фоном.

Должно выглядеть так:

введите сюда описание изображения

А при наведении курсора цвет фона и значка менялся:

введите сюда описание изображения

Начал делать реализацию так:

<Window x:Class="ProgramProject.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ProgramProject"
        mc:Ignorable="d"
        Title="MainWindow" Height="421" Width="425" ResizeMode="NoResize" Background="{x:Null}" WindowStyle="None">
    <Grid>
        <Border CornerRadius="12">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#2e75b6" Offset="0.5" />
                    <GradientStop Color="#1f4e79" Offset="1" />
                </LinearGradientBrush>
            </Border.Background>
        </Border>
        <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="60" Stroke="Black" Opacity="0" VerticalAlignment="Top" Width="425" MouseLeftButtonDown="Rectangle1_PreviewMouseLeftButtonDown">
        <Grid Height="20" Margin="382,10,23,0" VerticalAlignment="Top" MouseDown="Grid1_MouseDown" >
            <Button Opacity="0" Content="" HorizontalAlignment="Left" Margin="-13,-10,-12,-8" VerticalAlignment="Top" Width="45" Height="38"/>
            <Path  Stretch="Fill" Fill="#FFFFFF" Data="F1 M 25.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z " Margin="3.5,3.5,3.5,4.5"/>
        </Grid>
    </Grid>
</Window>

Однако, так как я новенький в wpf, у меня возникло несколько вопросов:

  1. Нет ли более простого способа, чем рисовать крестик и палку кодом? Может эти кнопки уже есть?
  2. Как выполнить изменения стиля сразу 2-ух объектов? В интернете есть примеры с изменением цвета фона кнопки при наведении, однако те примеры с наведением на кнопку. У меня же наведение может коснуться самого значка на кнопке и не факт, что указатель будет находиться за кнопкой.
  3. Правильно ли я вообще начал реализовывать это дело. Помещать кнопку и значок в grid?

Я не жду, что кто-то сделает готовый пример (хотя был бы очень признателен реализованному простому способу). Мне главное, чтобы натолкнули на верный путь, пояснив вопросы.

2

1 ответ 1

9

Для начала, всё не проще, а сложнее.

Если просто нарисовать кнопки, то они не попадут в non-client area. Поэтому вы должны поместить их туда, используя WindowChrome, например, как описано в этом вопросе: WPF Создание кастомного стиля окна с тенью.

Затем, по поводу отрисовки крестиков. Нет, в WPF нету встроенного крестика, потому что он для каждой системы свой (посмотрите, как выглядит он на Windows 7, и как на Windows 10), а также зависит от системных настроек (выбранной цветовой схемы, включенного или нет режима увеличения и/или повышенной контрастности и т. д.). Одна строчка нарисованного руками крестика — не слишком сложное требование.

Я бы тем не менее поместил крестик внутрь кнопки, и подменил шаблон:

<Button Height="25" Width="25">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border x:Name="Bd" Background="Transparent">
                <Path x:Name="Pt" Data="M0,0 M0.2,0.2 L 0.8,0.8 M0.2,0.8 L0.8,0.2 M1,1"
                      Stretch="Uniform" Stroke="Black" StrokeThickness="2"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Bd" Property="Background" Value="Red"/>
                    <Setter TargetName="Pt" Property="Stroke" Value="White"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

анимашка


Оффтопик: Вы, судя по коду, пишете XAML через визуальный редактор. Это приводит к достаточно неоптимальному коду, и выводит из игры layout manager. (Например, вы размещаете кнопку на экране конструкциями наподобие Margin="382,10,23,0". Не делайте так, используйте layout manager вручную.)

10
  • 1
    Отлично. Это то, что мне нужно. Знаю, что не по теме вопроса, но всё же. У меня есть Rectangle, который был добавлен, чтобы перемещать окно в пространстве при зажатой кнопке. Правильный ли я элемент выбрал и его настройки (как по мне, так не логично вставлять элемент с цветом, а потом скрывать этот цвет через Opacity. Тупой вопрос. Как вообще рисовать такие вещи, как крестик? Как Вы это делаете? 18 июл 2017 в 12:05
  • У приложения несколько окон. Можно CTRL+C - CTRL+V, но к чему столько лишнего кода? Можно ли это оптимизировать? Сделать кнопки на все окна (с возможностью добавления в некоторые из окон новых кнопок рядом (например, кнопку развернуть))? 18 июл 2017 в 12:15
  • @EgorTrutnev: Не совсем правильно. Для перемещения окна используется регион Caption в non-client area. Соответственно вам нужно настроить CaptionHeight в WindowChrome.
    – VladD
    18 июл 2017 в 12:47
  • @EgorTrutnev: Ну, рисовать крестик просто: поставить точку в левом верхнем углу, провести линию в правый нижний, потом поставить точку в левом верхнем, и провести линию в правый нижний.
    – VladD
    18 июл 2017 в 12:49
  • @EgorTrutnev: Никаких Ctrl-C / Ctrl-V! Определите стиль окна (он как раз и дан в примере), и примените его ко всем окнам.
    – VladD
    18 июл 2017 в 12:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.