Пользовательские настраиваемые WPF кнопки (и, возможно, другие элементы управления)

Question

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

Я хочу отобразить кнопку, на которой пользовательский взгляд. Он должен иметь возможность загружать визуальные данные из изображения (предпочтительно PNG-изображение с пикселем-альфа), нарезать его на куски (см. Схему ниже) и, таким образом, правильно изменить размер кнопки, сохраняя при этом столько преимуществ исходную кнопку WPF (включая текст/контент, значки, события и привязку).

Возможно ли это как можно?

Есть ли способ иметь шаблон WPF, который будет использовать определенный ImageSource (или, возможно, даже несколько отдельных файлов, если это необходимо), чтобы позволить изменяемую кнопку (или управлений в целом, если это сделать -able). Эта кнопка будет содержать значок и некоторый текст, и у него будет шаблон изображения «onMouseOver», а также «onMouseDown».

Я знаю, что в CSS это средство, имеющее изображение, представляет собой целую карту изображений и использует координаты и обрезающие прямоугольники для обеспечения правильного внешнего вида. Кто-нибудь есть идея, если это возможно, и дайте мне несколько указателей , где я мог бы найти, как «создавать» свои собственные элементы управления, которые происходят из известных?

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

Я использую .NET Framework 4.5, и люди, которые будут использовать это приложение, также должны будут использовать ту же структуру.

Спасибо заранее!

Answer 1

Просто шаблон с сеткой. Я использовал плоские цвета, чтобы заполнить прямоугольники в этом примере, просто заменить те щетки изображения, которые тянут пиксели из соответствующих исходных прямоугольников в изображении:

<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
    <Button.Template> 
     <ControlTemplate> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="100"/> 
        <RowDefinition Height="1*"/> 
        <RowDefinition Height="50"/> 
        <RowDefinition Height="1*"/> 
        <RowDefinition Height="100"/> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="100"/> 
        <ColumnDefinition Width="1*"/> 
        <ColumnDefinition Width="50"/> 
        <ColumnDefinition Width="1*"/> 
        <ColumnDefinition Width="100"/> 
       </Grid.ColumnDefinitions> 
       <Rectangle Grid.Row="0" Grid.Column="0" Fill="CornflowerBlue"/> 
       <Rectangle Grid.Row="0" Grid.Column="1" Fill="Yellow"/> 
       <Rectangle Grid.Row="0" Grid.Column="2" Fill="CornflowerBlue"/> 
       <Rectangle Grid.Row="0" Grid.Column="3" Fill="Yellow"/> 
       <Rectangle Grid.Row="0" Grid.Column="4" Fill="CornflowerBlue"/> 
       <Rectangle Grid.Row="1" Grid.Column="0" Fill="Green"/> 
       <Rectangle Grid.Row="1" Grid.Column="4" Fill="Green"/> 
       <Rectangle Grid.Row="2" Grid.Column="0" Fill="CornflowerBlue"/> 
       <Rectangle Grid.Row="2" Grid.Column="4" Fill="CornflowerBlue"/> 
       <Rectangle Grid.Row="3" Grid.Column="0" Fill="Green"/> 
       <Rectangle Grid.Row="3" Grid.Column="4" Fill="Green"/> 
       <Rectangle Grid.Row="4" Grid.Column="0" Fill="CornflowerBlue"/> 
       <Rectangle Grid.Row="4" Grid.Column="1" Fill="Yellow"/> 
       <Rectangle Grid.Row="4" Grid.Column="2" Fill="CornflowerBlue"/> 
       <Rectangle Grid.Row="4" Grid.Column="3" Fill="Yellow"/> 
       <Rectangle Grid.Row="4" Grid.Column="4" Fill="CornflowerBlue"/> 
       <Rectangle Grid.Row="1" Grid.Column="1" Grid.RowSpan="3" Grid.ColumnSpan="3" Fill="Gray"/> 
      </Grid> 
     </ControlTemplate> 
    </Button.Template> 
</Button> 

Результат:

Чтобы быть действительно честным, хотя я думаю, что это один из тех случаев, когда пользовательский UserControl может быть в порядке, даже если этот элемент управления использует ту же технику, что и здесь. Точная точка, в которой разделены каждый столбец и строка, должна быть указана несколько раз на протяжении всего вашего XAML, добавив эти точки, поскольку свойства зависимостей в пользовательском элементе управления сделают код намного более гибким и более легким, настраиваемым. Чтобы дать вам представление о том, что я говорю о том, вот что первые два прямоугольника может выглядеть в XAML:

<Rectangle Grid.Row="0" Grid.Column="0"> 
        <Rectangle.Fill> 
         <ImageBrush ImageSource="http://i.stack.imgur.com/something.jpg" Viewbox="0,0,100,100" ViewboxUnits="Absolute"/> 
        </Rectangle.Fill> 
       </Rectangle> 
       <Rectangle Grid.Row="0" Grid.Column="1"> 
        <Rectangle.Fill> 
         <ImageBrush ImageSource="http://i.stack.imgur.com/something.jpg" Viewbox="100,0,1,100" ViewboxUnits="Absolute" TileMode="None"/> 
        </Rectangle.Fill> 
       </Rectangle> 

Обратите внимание, как «something.jpg» является ссылка в обоих прямоугольников. Templaing изображение вместо UserControl позволит вам использовать TemplateBinding для источника изображения, но тогда все еще есть проблема, где можно сократить строки и столбцы. Вы можете сделать это с помощью комбинации приложенных свойств и конвертеров, но это просто становится глупым. Создайте пользовательский элемент управления и сделайте с ним.