Windows Phone: Создаем круглую кнопку с изображением

Иногда для приложения Windows Phone 7 требуется круглая кнопка с изображением, похожая на стандартную системную кнопку:

Системная кнопка

Попробуем создать такую кнопку самостоятельно. Первая часть - создание самой круглой кнопки - решается достаточно просто при помощи Blend, используя возможности Silverlight. Добавьте в проект кнопку и откройте проект в Blend. Щелкните правой кнопкой на размещенной кнопке и выберите команду Edit Template | Edit Copy. В появившемся диалоговом окне введите имя для стиля, например, RoundButton. Далее откройте XAML-код, найдите в шаблоне свойство Border и присвойте CornerRadius значение 33. Должно получится так:

<Border x:Name="ButtonBackground" 
    BorderBrush="{TemplateBinding BorderBrush}" 
	BorderThickness="{TemplateBinding BorderThickness}" 
	Background="{TemplateBinding Background}" 
	CornerRadius="33" 
	Margin="{StaticResource PhoneTouchTargetOverhang}">        
        <ContentControl x:Name="ContentContainer" 
		      Content="{TemplateBinding Content}" 
			  RenderTransformOrigin="0.5,0.5">
            <ContentControl.RenderTransform>
                <ScaleTransform x:Name="buttonScale" />
            </ContentControl.RenderTransform>
        </ContentControl>
</Border>

В результате у нас получится симпатичная круглая кнопка, в которой помещается только три символа (при размерах 72x72).

Круглая кнопка с текстом

Перейдем ко второй части задачи. Уберем текст из кнопки (Content) и добавим заранее подготовленную картинку:

<!--ContentPanel - place additional content here-->
  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,8,0,-8" >
       <Button  VerticalAlignment="Top" 
	   Style="{StaticResource RoundButton}" 
	   Height="72" Width="72" >    
               <Image Source="appbar.next.rest.png" Height="42" Width="42"  />
       </Button>
  </Grid>

Полученный результат почти нас устраивает.

Круглая кнопка с изображением

Обратите внимание, что изображение на кнопке отрисовывается корректно при использовании темной темы (dark theme). В следующий раз мы попробуем устранить данный недостаток и создать кнопку, которая будет адаптироваться к темной и светлой теме и выводить нужную картинку.

Скачать пример

Источник: вольный перевод статьи Creating Image Round Button for WP7 (part 1)

Реклама