C# WP8.1如何在切换按钮样式的可视状态管理器中绑定属性
我决定使用自定义样式自定义切换按钮：它包含图像和文本。 “我的按钮”的正常状态使用特定的图像和特定的文本前景。 选中状态使用其他状态 然而。。。这个开关对我的图像不起作用 我已经创建了一个自定义切换按钮。代码就在这里：C# WP8.1如何在切换按钮样式的可视状态管理器中绑定属性,c#,xaml,visual-studio-2013,windows-phone-8.1,C#,Xaml,Visual Studio 2013,Windows Phone 8.1,我决定使用自定义样式自定义切换按钮：它包含图像和文本。 “我的按钮”的正常状态使用特定的图像和特定的文本前景。 选中状态使用其他状态 然而。。。这个开关对我的图像不起作用 我已经创建了一个自定义切换按钮。代码就在这里： class CustomToggleButton : ToggleButton { public String ImageSource { get { return (String)GetValue(ImageSourceProperty); }
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));
}
<Image x:Name="ItemImage" Source="{Binding Path=ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MaxHeight="{StaticResource MenuButtonImageSize}" MaxWidth="{StaticResource MenuButtonImageSize}"/>
<Image x:Name="SelectedItemImage" Source="{Binding Path=SelectedImageSource, RelativeSource={RelativeSource TemplatedParent}}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MaxHeight="{StaticResource MenuButtonImageSize}" MaxWidth="{StaticResource MenuButtonImageSize}"/>
<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>
18.14
9.5,0,9.5,3.5
57.5
109
<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>
对于感兴趣的同事，我的解决方案如下。最好有重叠的图像，并根据切换按钮的状态更改图像的可见性。因此，这是不可能的。 您不能使用动态资源
用于设置情节提要或动画特性值的引用或数据绑定表达式。这是因为ControlTemplate中的所有内容都必须是线程安全的，计时系统必须冻结情节提要对象以使其线程安全。如果情节提要或其子时间线包含动态资源引用或数据绑定表达式，则无法冻结该情节提要。最后，我的解决方案与最初的想法略有不同：我集成了一个附加图像来管理“选定状态”。然后，我在可视状态管理器中使用图像可见性属性 我在custom toggle button类上有一个附加属性来设置“选定的图像源” 然后我修改了对该自定义控件的调用：
<controls:CustomToggleButton ImageSource="/Resources/home.png" SelectedImageSource="/Resources/home-neg.png" FontSize="18" Click="CustomToggleButton_Click"
Content="Acceuil" Style="{StaticResource HamburgerMenuItemStyle}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
<Style x:Key="HamburgerMenuItemStyle" TargetType="ToggleButton">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontFamily" Value="{StaticResource StandardFont}"/>
<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="ItemBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ItemTextBlock">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource IaF-SColor-DarkGreen}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ItemImage">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="SelectedItemImage">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</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="ItemBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource IaF-SColor-DarkGreen}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ItemTextBlock">
<DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ItemImage">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="SelectedItemImage">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</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="ItemBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}" VerticalAlignment="Center">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<Image x:Name="ItemImage" Source="{Binding Path=ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MaxHeight="{StaticResource MenuButtonImageSize}" MaxWidth="{StaticResource MenuButtonImageSize}"/>
<Image x:Name="SelectedItemImage" Source="{Binding Path=SelectedImageSource, RelativeSource={RelativeSource TemplatedParent}}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MaxHeight="{StaticResource MenuButtonImageSize}" MaxWidth="{StaticResource MenuButtonImageSize}"/>
<TextBlock Grid.Column="1" x:Name="ItemTextBlock" Style="{StaticResource BaseTextBlockStyle}" Foreground="{TemplateBinding Foreground}"
FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" Text="{TemplateBinding Content}" Margin="20,0,0,0"
TextAlignment="Left" VerticalAlignment="Center"/>
</Grid>
</ContentPresenter>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Image x:Name="ItemImage" Source="{Binding Path=ImageSource, RelativeSource={RelativeSource TemplatedParent}}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MaxHeight="{StaticResource MenuButtonImageSize}" MaxWidth="{StaticResource MenuButtonImageSize}"/>
<Image x:Name="SelectedItemImage" Source="{Binding Path=SelectedImageSource, RelativeSource={RelativeSource TemplatedParent}}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MaxHeight="{StaticResource MenuButtonImageSize}" MaxWidth="{StaticResource MenuButtonImageSize}"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ItemImage">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="SelectedItemImage">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>