Question

我有一个我为DevExpress TextEdit控件定义的控件模板，我想根据绑定（例如IsIncrease）更改模板中的Image Source 属性。

    <ControlTemplate x:Key="WarningTextEdit" TargetType="dxe:TextEdit">
        <Grid>
            <TextBox Text="{TemplateBinding Text}"/>
            <Image Margin="0,0,5,0" 
                   Source="pack://application:,,,/DevExpress.Xpf.Core.v17.2;component/Core/ConditionalFormatting/Images/IconSets/Symbols3_2.png" 
                   Width="17" 
                   Height="16"
                   RenderOptions.BitmapScalingMode="NearestNeighbor"   
                   HorizontalAlignment="Right"/>
        </Grid>
    </ControlTemplate>

如果属性IsIncrease设置为true，则应显示一个特定图标，如果该属性设置为false，则应显示另一个特定图标。有谁知道怎么做？

由于

Answer 1

要实现这一目标，您需要2个属性来存储图像源。我将使用Tag属性并编写附加属性来存储2个图像源并使用触发器来更改源

   public class AttachedProperty
{
    public static readonly DependencyProperty AltSourceProperty =
        DependencyProperty.RegisterAttached("AltSource",
        typeof(string), typeof(AttachedProperty),
        new PropertyMetadata());

    public static string GetAltSource(DependencyObject obj)
    {
        return (string)obj.GetValue(AltSourceProperty);
    }
    public static void SetAltSource(DependencyObject obj, string value)
    {
        obj.SetValue(AltSourceProperty, value);
    }
}

的ControlTemplate

    <ControlTemplate x:Key="WarningTextEdit" TargetType="dxe:TextEdit">
            <Grid>
                <TextBox Text="{TemplateBinding Text}" />
                <Image x:Name="image"
                       Width="17"
                       Height="16"
                       Margin="0,0,5,0"
                       HorizontalAlignment="Right"
                       RenderOptions.BitmapScalingMode="NearestNeighbor" />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsIncrease " Value="True">
                    <Setter TargetName="image" Property="Source" Value="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" />
                </Trigger>
                <Trigger Property="IsIncrease " Value="False">
                    <Setter TargetName="image" Property="Source" Value="{Binding Path=(local:AttachedProperty.AltSource), RelativeSource={RelativeSource TemplatedParent}}" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>



<dxe:TextEdit Tag="Image1.jpg" local:AttachedProperty.AltSource="Image2.jpg"/>

Answer 2

您可以使用转换器执行此操作，您有两种选择，要么在Image中包含2 Grid，要么使用转换器隐藏/显示它们，要么使用Image Source并使用转换器来更改public class BoolConverter : MarkupExtension, IValueConverter { public object TrueValue { get; set; } = Binding.DoNothing; public object FalseValue { get; set; } = Binding.DoNothing; public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if (!(value is bool)) return Binding.DoNothing; return (bool)value ? TrueValue : FalseValue; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { if (value == TrueValue) return true; if (value == FalseValue) return false; return Binding.DoNothing; } public override object ProvideValue(IServiceProvider serviceProvider) { return this; } }属性（这可能是更好的解决方案）。这是一个可以处理这两种情况的转换器，然后是两种解决方案。

BoolConverter：

Image

MainWindow.xaml（解决方案1：两个<ControlTemplate x:Key="WarningTextEdit" TargetType="dxe:TextEdit"> <Grid> <TextBox Text="{TemplateBinding Text}"/> <Image Margin="0,0,5,0" Source="pack://application:,,,/DevExpress.Xpf.Core.v17.2;component/Core/ConditionalFormatting/Images/IconSets/Symbols3_2.png" Width="17" Height="16" RenderOptions.BitmapScalingMode="NearestNeighbor" HorizontalAlignment="Right" Visibility="{Binding IsIncrease, Converter={local:BoolConverter TrueValue=Collapsed, FalseValue=Visible}}"/> <Image Margin="0,0,5,0" Source="pack://application:,,,/DevExpress.Xpf.Core.v17.2;component/Core/ConditionalFormatting/Images/IconSets/TrafficLights3_1.png" Width="17" Height="16" RenderOptions.BitmapScalingMode="NearestNeighbor" HorizontalAlignment="Right" Visibility="{Binding IsIncrease, Converter={local:BoolConverter TrueValue=Visible, FalseValue=Collapsed}}"/> </Grid> </ControlTemplate> s）：

Image

MainWindow.xaml（解决方案2：一个<ControlTemplate x:Key="WarningTextEdit" TargetType="dxe:TextEdit"> <Grid> <TextBox Text="{TemplateBinding Text}"/> <Image Margin="0,0,5,0" Source="{Binding IsIncrease, Converter={local:BoolConverter TrueValue='pack://application:,,,/DevExpress.Xpf.Core.v17.2;component/Core/ConditionalFormatting/Images/IconSets/Symbols3_2.png', FalseValue='pack://application:,,,/DevExpress.Xpf.Core.v17.2;component/Core/ConditionalFormatting/Images/IconSets/TrafficLights3_1.png'}}" Width="17" Height="16" RenderOptions.BitmapScalingMode="NearestNeighbor" HorizontalAlignment="Right"/> </Grid> </ControlTemplate>）：

{{1}}

WPF更改图标取决于控制模板中的绑定

2 个答案: