5

Нашел множество примеров как сделать круглые кнопки, но не одного решения о том как сделать в виде треугольника. Возможно ли это, или лучше использовать изображение для этой цели?

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

7
  • А можете, пожалуйста, приложить картинку того, какую именно вам нужно получить кнопку? 26 июн 2018 в 6:27
  • Обычный треугольник ))) 26 июн 2018 в 6:28
  • @МаксимШалашов Ага, сейчас сделаю треугольник, а вы скажете, что не такой, недостаточно обычный:) 26 июн 2018 в 6:29
  • Вадим тут важно не как он выглядит, а принцип возможно это сделать или нет. Поправить его и сделать вверх, вниз, вправо, влево направленный думаю смогу сделать если пойму принцип создание подобных кнопок. 26 июн 2018 в 6:33
  • @МаксимШалашов Вам помог мой ответ или требуется что-то доработать? 26 июн 2018 в 8:17

2 ответа 2

4

Чтобы кнопка была действительно треугольной, необходимо переопределить ее шаблон.

Чтобы не писать шаблон с нуля полностью, я возьму за основу стандартный, для этого в Visual Studio в дизайнере щелкаем правой по кнопке и выбираем Edit Template-Edit a Copy... и вводим желаемое название шаблона и выбираем место его расположения (можно просто нажать OK и переместить/переименовать позже вручную).

Студия добавит стандартный шаблон кнопки, редактируем его: ищем <Setter Property="Template"> у меня там такой шаблон:

<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
    <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>

В другой ОС он может отличаться, правим его:

<Path Name="border" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" Data="M12,24 L36,0 L36,48 Z" Width="48"/>

Кнопка будет простая и не будет уметь содержать контент, поэтому одного Path достаточно.

Смотрим теперь те места, что подчеркнуты синим, наименования свойств у Border и Path отличаются, поэтому надо эти места поправить, кисть для границы называется Stroke (вместо BorderBrush), а кисть для заливки — Fill (вместо Background). Контента нет, поэтому строчку <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/> удаляю полностью.

Триггеры поправлены, синих подчеркиваний не должно остаться, дизайнер должен заработать, можно запустить и проект. Кнопка, в принципе, уже функционирует нормально, но если с помощью клавиши Tab установить на нее фокус, то мы увидим, что он прямоугольный. За фокус отвечает свойство FocusVisualStyle, видим в стиле, что он устанавливается так: <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>, т.е. необходимо отредактировать также ресурс FocusVisual, там сейчас находится Rectangle, мы возьмем наш уже готовый Path, но без заливки и с прерывистой границей (как и было у Rectangle):

<Path Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2" Data="M12,24 L36,0 L36,48 Z" Width="48"/>

Видим, что геометрия Path повторяется дважды, чтобы избежать дублирования, вынесем ее отдельным ресурсом:

<StreamGeometry x:Key="Geometry">M12,24 L36,0 L36,48 Z</StreamGeometry>

Тогда в Path достаточно будет указать Data="{StaticResource Geometry}"

Ну и напоследок можно поудалять ненужные сеттеры из стиля, которые касаются контента.

Еще, для того, чтобы иметь возможность получить кнопки со стрелками еще и вниз/вверх/вправо, добавим в ресурсы следующие трансформации:

<RotateTransform x:Key="Rotate90" CenterX="24" CenterY="24" Angle="90"/>
<RotateTransform x:Key="Rotate180" CenterX="24" CenterY="24" Angle="180"/>
<RotateTransform x:Key="Rotate270" CenterX="24" CenterY="24" Angle="270"/>

В итоге весь пример целиком выглядит следующим образом:

<Window.Resources>
    <StreamGeometry x:Key="Geometry">M12,24 L36,0 L36,48 Z</StreamGeometry>
    <Style x:Key="FocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Path Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2" Data="{StaticResource Geometry}" Width="48"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
    <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
    <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
    <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
    <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
    <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
    <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
    <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
    <Style x:Key="TriangleButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
        <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Path Name="border" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" Data="{StaticResource Geometry}" Width="48"/>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsDefaulted" Value="true">
                            <Setter Property="Stroke" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Fill" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                            <Setter Property="Stroke" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Fill" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                            <Setter Property="Stroke" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Fill" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                            <Setter Property="Stroke" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <RotateTransform x:Key="Rotate090" CenterX="24" CenterY="24" Angle="090"/>
    <RotateTransform x:Key="Rotate180" CenterX="24" CenterY="24" Angle="180"/>
    <RotateTransform x:Key="Rotate270" CenterX="24" CenterY="24" Angle="270"/>
</Window.Resources>

<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
    <Button Style="{DynamicResource TriangleButtonStyle}"/>
    <Button Style="{DynamicResource TriangleButtonStyle}" RenderTransform="{StaticResource Rotate090}"/>
    <Button Style="{DynamicResource TriangleButtonStyle}" RenderTransform="{StaticResource Rotate180}"/>
    <Button Style="{DynamicResource TriangleButtonStyle}" RenderTransform="{StaticResource Rotate270}"/>
</StackPanel>

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

6
  • Единственное бы значение Data для Path сделать, чтобы не дублировалось, а так очень хорошо. Также не совсем понятно как именно применять те же стили для кнопок разных направлений. 26 июн 2018 в 9:06
  • Ну это уже мелочи, надеюсь, ТС справится с этим самостоятельно. А разные направления — да хоть как у вас через RotateTransform (которые тоже можно положить в ресурсы и потом задавать самой кнопке, типа RenderTransform="{StaticResource Rotate90}") 26 июн 2018 в 9:17
  • @VadimOvchinnikov, дополнил ответ. 26 июн 2018 в 17:13
  • 1
    @VadimOvchinnikov, этот вариант кнопки немасштабируем. Можно, конечно, Path поместить во ViewBox, но, как известно, он масштабирует и толщину линий, что при большом масштабе будет смотреться нехорошо. По идее надо писать конвертер для масштаба и рисовать геометрию с его использованием. По поводу RenderTransformOrigin скорее всего вы правы, надо попробовать и с ним. 26 июн 2018 в 20:14
  • 1
    Масштабирования всё-таки можно достичь: 1) надо заменять CenterX="24" и CenterY="24" на RenderTransformOrigin="0.5, 0.5". 2) Чтобы кнопки масштабировались задайте Path значение Stretch="Uniform". 3) В Path для FocusVisual и Button надо удалить Width="48". 26 июн 2018 в 21:13
2

Вам надо просто создать иконку в векторном стиле с помощью Path и удалить границы и фон с кнопки (для этого стиль кнопки основываем на {StaticResource {x:Static ToolBar.ButtonStyleKey}}, так как с помощью этого стиля удаляются границы и фон кнопки).

В итоге XAML окна (к примеру, MainWindow.xaml):

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button Style="{StaticResource ArrowButtonStyle}">
        <Path Style="{StaticResource ArrowIconButtonStyle}" />
    </Button>

    <Button Style="{StaticResource ArrowButtonStyle}">
        <Path Style="{StaticResource ArrowIconButtonStyle}">
            <Path.RenderTransform>
                <RotateTransform Angle="90" />
            </Path.RenderTransform>
        </Path>
    </Button>

    <Button Style="{StaticResource ArrowButtonStyle}">
        <Path Style="{StaticResource ArrowIconButtonStyle}">
            <Path.RenderTransform>
                <RotateTransform Angle="180" />
            </Path.RenderTransform>
        </Path>
    </Button>

    <Button Style="{StaticResource ArrowButtonStyle}">
        <Path Style="{StaticResource ArrowIconButtonStyle}">
            <Path.RenderTransform>
                <RotateTransform Angle="-90" />
            </Path.RenderTransform>
        </Path>
    </Button>
</StackPanel>

Стили (к примеру, в App.xaml):

<Style x:Key="ArrowButtonStyle" TargetType="Button" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
    <Setter Property="Padding" Value="5" />
    <Setter Property="Width" Value="100" />
    <Setter Property="Height" Value="100" />
</Style>
<Style x:Key="ArrowIconButtonStyle" TargetType="Path">
    <Setter Property="Data" Value="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z " />
    <Setter Property="Fill" Value="#00a8f3" />
    <Setter Property="Width" Value="40" />
    <Setter Property="Height" Value="80" />
    <Setter Property="Stretch" Value="Fill" />
    <Setter Property="RenderTransformOrigin" Value="0.5, 0.5" />
</Style>

В итоге получаем разные стрелки:

стрелочные кнопки


Если эти кнопки надо переиспользовать много раз, то можно и свойство RenderTransform положить в отдельные стили для каждого направления стрелки.

MainWindow.xaml

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button Style="{StaticResource ArrowButtonStyle}">
        <Path Style="{StaticResource ArrowLeftIconButtonStyle}" />
    </Button>

    <Button Style="{StaticResource ArrowButtonStyle}">
        <Path Style="{StaticResource ArrowTopIconButtonStyle}" />
    </Button>

    <Button Style="{StaticResource ArrowButtonStyle}">
        <Path Style="{StaticResource ArrowRightIconButtonStyle}" />
    </Button>

    <Button Style="{StaticResource ArrowButtonStyle}">
        <Path Style="{StaticResource ArrowBottomIconButtonStyle}" />
    </Button>
</StackPanel>

App.xaml

<Style x:Key="ArrowButtonStyle" TargetType="Button" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
    <Setter Property="Padding" Value="5" />
    <Setter Property="Width" Value="100" />
    <Setter Property="Height" Value="100" />
</Style>
<Style x:Key="ArrowIconButtonStyle" TargetType="Path">
    <Setter Property="Data" Value="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z " />
    <Setter Property="Fill" Value="#00a8f3" />
    <Setter Property="Width" Value="40" />
    <Setter Property="Height" Value="80" />
    <Setter Property="Stretch" Value="Fill" />
    <Setter Property="RenderTransformOrigin" Value="0.5, 0.5" />
</Style>
<Style x:Key="ArrowLeftIconButtonStyle" TargetType="Path" BasedOn="{StaticResource ArrowIconButtonStyle}">
</Style>
<Style x:Key="ArrowRightIconButtonStyle" TargetType="Path" BasedOn="{StaticResource ArrowIconButtonStyle}">
    <Setter Property="RenderTransform">
        <Setter.Value>
            <RotateTransform Angle="180" />
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="ArrowTopIconButtonStyle" TargetType="Path" BasedOn="{StaticResource ArrowIconButtonStyle}">
    <Setter Property="RenderTransform">
        <Setter.Value>
            <RotateTransform Angle="90" />
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="ArrowBottomIconButtonStyle" TargetType="Path" BasedOn="{StaticResource ArrowIconButtonStyle}">
    <Setter Property="RenderTransform">
        <Setter.Value>
            <RotateTransform Angle="-90" />
        </Setter.Value>
    </Setter>
</Style>
4
  • А почему именно от ToolBar.ButtonStyleKey? 26 июн 2018 в 7:33
  • @АндрейNOP Просто потому что удаляются фон и границы с помощью этого стиля. Сейчас внесу это в ответ. 26 июн 2018 в 7:34
  • На самом деле не удаляются, а становятся невидимыми, но при наведении курсора или при получении фокуса видно что кнопка не треугольная 26 июн 2018 в 7:57
  • @АндрейNOP Да, всё именно так, как вы и описали. Меня удовлетворяет данное поведение. Конечно, можно чтобы кнопка была действительно треугольной, но лично я не вижу в этом смысла и удобства со стороны пользователя. 26 июн 2018 в 8:00

Ваш ответ

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

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