Question

我有一个控制图像不透明度的滑块。

<Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="0.60*" />
      <ColumnDefinition Width="0.40*" />
    </Grid.ColumnDefinitions>
    <Border Grid.Column="1"
            BorderBrush="Black"
            BorderThickness="1">
      <Image Opacity="{Binding Path=Value,
                               ElementName=fadeSlider,
                               Mode=Default,
                               UpdateSourceTrigger=PropertyChanged}"
             Source="/Mydll;component/Images/Preview.png"
             Stretch="Fill" />
    </Border>
    <Grid Grid.Column="0"
          HorizontalAlignment="Center"
          VerticalAlignment="Center"
          IsEnabled="{Binding Path=IsChecked,
                              ElementName=applyTransparency,
                              Mode=Default}">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.70*" />
        <ColumnDefinition Width="0.30*" />
      </Grid.ColumnDefinitions>

      <telerik:RadSlider x:Name="fadeSlider"
                         Grid.Column="0"
                         Width="130"
                         IsMoveToPointEnabled="True"
                         LargeChange="10"
                         Maximum="100"
                         Minimum="0"
                         SmallChange="5"
                         ThumbVisibility="Visible"
                         TickFrequency="25"
                         TickPlacement="BottomRight"
                         Value="1">
        <telerik:RadSlider.TickTemplate>
          <DataTemplate>
            <Grid>
              <TextBlock FontSize="11"
                         Text="{Binding}" />
            </Grid>
          </DataTemplate>
        </telerik:RadSlider.TickTemplate>
      </telerik:RadSlider>
      <telerik:RadMaskedNumericInput Grid.Column="1"
                                     Width="25"
                                     Margin="2"
                                     MaskedInput:MaskedInputExtensions.Maximum="100"
                                     MaskedInput:MaskedInputExtensions.Minimum="0"
                                     Text="{Binding Path=Value,
                                                    ElementName=fadeSlider,
                                                    Mode=TwoWay}" />

    </Grid>
  </Grid>

问题是滑块的工作范围为0-100，不透明度的工作范围是0-1，我应该如何将滑块值绑定到图像的不透明度。滑块值0表示1不透明度，滑块值100表示0不透明度。

Answer 1

你需要为此写一个converter。像：

public class OpacityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, 
           object parameter, CultureInfo culture)
    {
        int sliderValue = System.Convert.ToInt32(value);

        return (100 - sliderValue)/100d;
    }

    public object ConvertBack(object value, Type targetType, 
           object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

XAML：

<Grid.Resources>
      <myNamespace:OpacityConverter x:Key="opacityConverter"/>
</Grid.Resources>

<Image Opacity="{Binding Path=Value,
           ElementName=fadeSlider,
           Mode=Default,
           UpdateSourceTrigger=PropertyChanged},
           Converter={StaticResource opacityConverter}"                            
        Source="/Mydll;component/Images/Preview.png"
        Stretch="Fill" />

将值从百分比转换为不透明度

1 个答案: