如何在可视化状态中绑定动态值
本文关键字:绑定 动态 状态 可视化 | 更新日期: 2023-09-27 18:04:05
在一个通用的Windows应用程序中如何在XAML的可视状态中绑定一个值。为了便于理解,我在下面的代码中删除了VisualStateGroups下除了checked state之外的其他状态。
<Page.Resources>
<converters:UriToImageBrushConverter x:Key="cnvt"/>
<Style x:Key="RadioButtonStyletest" TargetType="RadioButton">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{ThemeResource RadioButtonContentForegroundThemeBrush}"/>
<Setter Property="Padding" Value="1,4,0,0"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="29"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid VerticalAlignment="Top">
<Ellipse x:Name="BackgroundEllipse" Height="23" Fill="{Binding Imgsrc, Converter={StaticResource cnvt}}" Stroke="{ThemeResource RadioButtonBorderThemeBrush}" StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" UseLayoutRounding="False" Width="23">
</Ellipse>
<Ellipse x:Name="CheckGlyph" Fill="{ThemeResource RadioButtonForegroundThemeBrush}" Height="13" Opacity="0" UseLayoutRounding="False" Width="13"/>
<Rectangle x:Name="FocusVisualWhite" Height="29" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1" Width="29"/>
<Rectangle x:Name="FocusVisualBlack" Height="29" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1" Width="29"/>
</Grid>
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
在上面的代码中,我试图绑定BackgroundEllipse背景,但没有发生。
c#代码:private String imgsrc;
public String Imgsrc
{
get
{
return imgsrc;
}
set
{
imgsrc = value;
}
}
public MainPage()
{
this.InitializeComponent();
Imgsrc = "/Assets/yes.png";
}
转换器
class UriToImageBrushConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
try
{
return new BitmapImage(new Uri((string)value));
}
catch
{
return new BitmapImage();
}
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
}
请告诉我哪里错了
xaml中的Binding默认在DataContext中查找属性。然而,ImageBrush不是FrameworkElement,也没有DataContext。
试试这个:
<Ellipse x:Name="BackgroundEllipse"
Fill="{Binding Imgsrc, Converter={StaticResource UriToImageBrushConverter}}" />
UriToImageBrushConverter是一个实现IValueConverter的简单类,我相信你不需要我来写它。
还要确保BackgroundEllipse元素的DataContext是MainPage。否则你可以使用RelativeSource:
<Ellipse x:Name="BackgroundEllipse"
Fill="{Binding Imgsrc, RelativeSource={RelativeSource AncestorType=Page}}
Converter={StaticResource UriToImageSourceConverter}}" />