Question

我在网格的右上角有一个带复选框的网格。我想在状态更改时将图像指定到复选框。单击它时，我想将tick.png图像设置为复选框。当我取消选中它时，我想将blank.png图像设置为它。如何在下面的复选框中指定图像？

 <ListBox Grid.Row="1" x:Name="BookCategories" ItemsSource="{Binding}">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>                   
                        <toolkit:WrapPanel ItemHeight="200" ItemWidth="200" Margin="10"/>                 
                </ItemsPanelTemplate>
                </ListBox.ItemsPanel>

                <ListBox.ItemTemplate>
                    <DataTemplate>
                    <Grid Background="#12161e"  Opacity="0.5" Margin="10,-5,0,20" Tap="Grid_Tap_1" Height="200" Width="200">
                        <CheckBox  Grid.Row="1"  Margin="145,-15,-15,0" x:Name="Chkcategories" IsChecked="{Binding Path=BookCategoriesStatus, Mode=TwoWay}">
                            <Image Source="Assets/books.jpg" Height="30" Width="30"/>
                        </CheckBox>
                        <TextBlock  Margin="40, 80, 0, 0" FontSize="22" Text="{Binding Path=CategoryName}"></TextBlock>
                        </Grid>

                </DataTemplate>
                </ListBox.ItemTemplate>

        </ListBox>

Answer 1

我不确定您是否需要“第一个案例”或“第二个案例”（请查看图片并查看 sample ）。

CheckBox sample

在第一种情况下，您必须修改CheckBox模板。在第二种情况下，您只能使用DataTrigger或Converter。

<CheckBox
    x:Name="checkBox"
    IsChecked="{Binding Path=BookCategoriesStatus, Mode=TwoWay}">

    <Image
        Height="30"
        Source="/Icons/circle.png"
        Width="30">

        <i:Interaction.Triggers>

            <ei:DataTrigger
                Binding="{Binding Path=IsChecked, ElementName=checkBox}"
                Value="True">

                <ei:ChangePropertyAction
                    PropertyName="Source"
                    Value="/Icons/cross.png" />

            </ei:DataTrigger>

            <ei:DataTrigger
                Binding="{Binding Path=IsChecked, ElementName=checkBox}"
                Value="False">

                <ei:ChangePropertyAction
                    PropertyName="Source"
                    Value="/Icons/circle.png" />

            </ei:DataTrigger>

        </i:Interaction.Triggers>

    </Image>

</CheckBox>

Answer 2

例如 - 您可以将ImageSource绑定到IsChecked值 - 为此，您必须使用转换器：
在xaml：

...
xmlns:common="clr-namespace:YourNamespace"
...
<phone:PhoneApplicationPage.Resources>
    <common:BoolToImageSource x:Key="converter"/>
</phone:PhoneApplicationPage.Resources>
...
<CheckBox x:Name="Chkcategories" >
     <Image Height="30" Width="30" Source="{Binding ElementName=Chkcategories, Path=IsChecked, Converter={StaticResource converter} }"/>
</CheckBox>

在.cs：

public class BoolToImageSource : IValueConverter
{
  public System.Windows.Media.ImageSource FalseValue;
  public System.Windows.Media.ImageSource TrueValue;


  public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  {
     TrueValue = new BitmapImage(new Uri("/Resources/tick.png", UriKind.RelativeOrAbsolute));
     FalseValue = new BitmapImage(new Uri("/Resources/blank.png", UriKind.RelativeOrAbsolute));

     if (value == null)
        return FalseValue;
     else
        return (bool)value ? TrueValue : FalseValue;
  }

  public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  {
     return value != null ? value.Equals(TrueValue) : false;
  }
}

Answer 3

您可以轻松实现onclick事件

<点击事件

中的

if（复选框点击）{chkbox.background = tick image}   其他{   chkbox.background = untick _image

}

选中Windows Phone 8复选框图像取消选中

3 个答案: