Я решил настроить кнопку-переключатель с собственным стилем: он содержит изображение и текст. Обычное состояние моей кнопки использует определенное изображение и определенный текст переднего плана. проверенное состояние использует другие.
Однако... переключатель не работает для моих изображений.
Я создал пользовательскую кнопку переключения. Код находится прямо здесь:
class CustomToggleButton : ToggleButton
{
public String ImageSource
{
get { return (String)GetValue(ImageSourceProperty); }
set { SetValue(ImageSourceProperty, value); }
}
// Using a DependencyProperty as the backing store for ImageSource. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ImageSourceProperty =
DependencyProperty.Register("ImageSource", typeof(String), typeof(CustomToggleButton), new PropertyMetadata(String.Empty));
public String SelectedImageSource
{
get { return (String)GetValue(SelectedImageSourceProperty); }
set { SetValue(SelectedImageSourceProperty, value); }
}
// Using a DependencyProperty as the backing store for SelectedImageSource. This enables animation, styling, binding, etc...
public static readonly DependencyProperty SelectedImageSourceProperty =
DependencyProperty.Register("SelectedImageSource", typeof(String), typeof(CustomToggleButton), new PropertyMetadata(String.Empty));
}
Я использую свой контроль следующим образом:
<controls:CustomToggleButton ImageSource="/Resources/home.png" SelectedImageSource="/Resources/home-neg.png" FontSize="18"
Content="Acceuil" Style="{StaticResource HamburgerMenuItemStyle}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
Здесь пользовательский стиль кнопки переключения:
<x:Double x:Key="TextStyleLargeFontSize">18.14</x:Double>
<Thickness x:Key="PhoneButtonContentPadding">9.5,0,9.5,3.5</Thickness>
<x:Double x:Key="PhoneButtonMinHeight">57.5</x:Double>
<x:Double x:Key="PhoneButtonMinWidth">109</x:Double>
<Style x:Key="HamburgerMenuItemStyle" TargetType="ToggleButton">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{ThemeResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontFamily" Value="{StaticResource StandardFont}"/>
<Setter Property="FontSize" Value="{ThemeResource TextStyleLargeFontSize}"/>
<Setter Property="Padding" Value="{ThemeResource PhoneButtonContentPadding}"/>
<Setter Property="MinHeight" Value="{ThemeResource PhoneButtonMinHeight}"/>
<Setter Property="MinWidth" Value="{ThemeResource PhoneButtonMinWidth}"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:CustomToggleButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="EnabledContent">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource IaF-SColor-DarkGreen}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="ToggleImage">
<DiscreteObjectKeyFrame KeyTime="0" Value="{Binding ImageSource}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource IaF-SColor-DarkGreen}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="EnabledContent">
<DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="ToggleImage">
<DiscreteObjectKeyFrame KeyTime="0" Value="{Binding SelectedImageSource}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="CheckedPointerOver"/>
<VisualState x:Name="CheckedPressed"/>
<VisualState x:Name="CheckedDisabled"/>
<VisualState x:Name="Indeterminate"/>
<VisualState x:Name="IndeterminatePointerOver"/>
<VisualState x:Name="IndeterminatePressed"/>
<VisualState x:Name="IndeterminateDisabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="EnabledBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{ThemeResource PhoneTouchTargetOverhang}">
<ContentPresenter AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{TemplateBinding Foreground}" Margin="{TemplateBinding Padding}" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image x:Name="ToggleImage" Source="{Binding ImageSource}"/>
<TextBlock Grid.Column="1" Grid.ColumnSpan="3" x:Name="EnabledContent" Style="{StaticResource BaseTextBlockStyle}" Foreground="{TemplateBinding Foreground}"
FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" Text="{TemplateBinding Content}" Margin="10,0,0,0"
TextAlignment="Left" VerticalAlignment="Center"/>
</Grid>
</ContentPresenter>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Как видите, я пытаюсь установить свои пользовательские свойства кнопки-переключателя для двух разных состояний:
Нормальное состояние:
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="ToggleImage">
<DiscreteObjectKeyFrame KeyTime="0" Value="{Binding ImageSource}"/>
</ObjectAnimationUsingKeyFrames>
И проверенное состояние:
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="ToggleImage">
<DiscreteObjectKeyFrame KeyTime="0" Value="{Binding SelectedImageSource}"/>
</ObjectAnimationUsingKeyFrames>
И... совсем не работает.
ИЗМЕНИТЬ:
Для заинтересованных товарищей мое решение доступно ниже.
