Кнопка с несколькими объектами Path - C# WPF - Ответ 9858164

@PresnovEA · Регистрация: 17.02.2015

Author24 — интернет-сервис помощи студентам

Доброго времени суток.

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

Есть задача, создать WPF сложную кнопку почты, на которой вместо обычного текста будет присутствовать:
- рисунок с изображением(2) (например конвертика);
- на момент подгруздки писем поверх основного рисунка, в определенном красотой месте, крутится рисунок отображающий загрузку писем(3) (а-ля стрелочки в кружочке)
- после загрузки, - текст отображающий сколько непрочитанных писем у пользователя(4), если они есть
- анимация подсветки кнопки, если письма есть(5).

После некоторого гугла было решено следующее:

1. Для применения собственных свойств к кнопке использовать стиль, в который поместить свои изыски со шрифтами и шаблон, содержащий вышеописанные дополнения.
2. В качестве основного рисунка был выбран векторный вариант картинки, реализованный с помощью объекта Path:

XML

<Path x:Key="Mail" Data="
          M 0, 5.5 L 17.5, 5.5 C 17.4, 6 17.4, 6.3
          17.4, 6.7 17.4, 8.3 17.8, 9.8 18.7, 11.1 L 13.78, 14.2z 
          
          M 0, 5.5 L 13.8, 17 19.6, 12.1 C 21, 13.6 
          23, 14.6 25.3, 14.6 26, 14.6 26.8, 14.5
          27.5, 14.3 L 27.5 22 27.3, 21.9 27.5, 22
          0, 22 0.1, 21.9 0, 22z"
           Stretch="Uniform" Fill="#FFFFFFFF" Width="50" Height="50" 
          Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
    </Path>

Изображение, в принципе, можно без труда конвертить из фотошопоподобных программ путем юзания плагина, или же взять готовые бесплатные, например отсюда.
С векторным изображением в WPF, как кажется, проще работать т.к. сам WPF векторный, и, в частности, применять анимацию. (Так ли это?)
Как видно из врезки кода выше, картинка создана с помощью встроенного языка описания геометрии, сведения о котором, в целом, найти не сложно.
3. В качестве рисунка на момент загрузки, выбран следующий рисунок

XML

<Path x:Key="MailSync" Data="
          M 20.3, 6.3659973 L 21.1, 10.5 22.1, 9.7 C 23, 10.5 24.2, 11 25.5, 10.9 26.7, 10.7 27.6, 
          10.2 28.3, 9.4 L 27.4, 9 C 26.9, 9.5 26.2, 9.9 25.4, 9.9 24.4, 10 23.5, 9.7 22.8, 9 L 24.3, 7.8z 
          
          M 25.1, 2.2 C 24.5, 2.25 24.9, 2.3 24.6, 2.3 23.5, 2.4 22.5, 3 21.8, 3.8 L 22.7, 4.1 C 23.2, 3.6 24, 3.3 
          24.7, 3.2 25.8, 3.1 27, 3.5 27.6, 4.3 L 26.3, 5.5 30.2, 7 29.4 ,2.8 28.3, 3.7 C 27.5, 2.8, 26.4, 2.2, 25.2, 2.2z
          
          M 25.3, 0 C 29, 0 32, 3 32, 6.7 32, 10.4 29, 13.4 25.3, 13.4 21.6, 13.4 18.6, 10.4 18.6, 6. 18.6, 3 21.6, 0 25.3,0z
          "
          Stretch="Uniform" Fill="#FFFFFFFF" Width="50" Height="50" 
          Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
        
    </Path>

.
4. Для отображения информации о полученных письмах видится создание контейнера, в который ляжет картинка для красивости фона и TextBlock для отображения количества писем. Чтобы иметь возможность удобно засылать контент думалось создать свойство зависимости, отвечающее за текст в TextBlock
5. Для создания анимации думал создать в шаблоне триггер, отвечающий за свойство Fill элементов типа Path и событие, которое будет его включать.

Собственно вопросы:
Есть ли какие-то реальные примеры подобного контрола? (В интернете в основном либо куски, либо простые примеры. Это, отчасти и послужило толчком для написания поста.)
Как будет лучше организовать структуру такого контрола?
Вопрос, на котором я повис на данном этапе - Как правильно группировать элементы типа Path в одну структуру?

По мере продвижения, буду скидывать реализацию, может что-то поправят, или кому-то пригодится.

Код стиля, который есть сейчас приаттачил как .log файл.

Большое спасибо за помощь.

Вернуться к обсуждению:
Кнопка с несколькими объектами Path C# WPF

Следующий ответ