Изменить символ галочки WP7

Question

Я хочу поставить изображение как флажок. Возможно ли это в WP7? Я искал во всех свойствах флажок, но не нашел. Спасибо

Answer 1

Просто отредактируйте шаблон, это очень просто. Вы превращаете объект Path с именем CheckMark в изображение, и вы золотисты.

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="PhoneButtonBase"
           TargetType="ButtonBase">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}" />
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}" />
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}" />
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}" />
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}" />
        <Setter Property="Padding" Value="10,3,10,5" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ButtonBase">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver" />
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneBackgroundBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneForegroundBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground"
                                                                       Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneForegroundBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneDisabledBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground"
                                                                       Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneDisabledBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="Transparent" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground"
                                Margin="{StaticResource PhoneTouchTargetOverhang}"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="0">
                            <ContentControl x:Name="ContentContainer"
                                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                            Content="{TemplateBinding Content}"
                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                            Foreground="{TemplateBinding Foreground}"
                                            Padding="{TemplateBinding Padding}" />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="PhoneRadioButtonCheckBoxBase"
           BasedOn="{StaticResource PhoneButtonBase}"
           TargetType="ToggleButton">
        <Setter Property="Background" Value="{StaticResource PhoneRadioCheckBoxBrush}" />
        <Setter Property="BorderBrush" Value="{StaticResource PhoneRadioCheckBoxBrush}" />
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}" />
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Padding" Value="0" />
    </Style>
    <ImageBrush x:Key="CheckBoxImageBrush"
                ImageSource="accept.png" />
    <Style x:Key="CheckBoxWithImageStyle"
           BasedOn="{StaticResource PhoneRadioButtonCheckBoxBase}"
           TargetType="CheckBox">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver" />
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckBackground"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneRadioCheckBoxPressedBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckBackground"
                                                                       Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneRadioCheckBoxPressedBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark"
                                                                       Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneRadioCheckBoxCheckBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateMark"
                                                                       Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneRadioCheckBoxCheckBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckBackground"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneRadioCheckBoxDisabledBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckBackground"
                                                                       Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneDisabledBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark"
                                                                       Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneRadioCheckBoxCheckDisabledBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateMark"
                                                                       Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneRadioCheckBoxCheckDisabledBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneDisabledBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckMark"
                                                                       Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked" />
                                <VisualState x:Name="Indeterminate">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateMark"
                                                                       Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid Margin="{StaticResource PhoneTouchTargetLargeOverhang}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="32" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Border x:Name="CheckBackground"
                                    Width="32"
                                    Height="32"
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Center"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding Background}"
                                    BorderThickness="{StaticResource PhoneBorderThickness}"
                                    IsHitTestVisible="False" />
                            <Rectangle x:Name="IndeterminateMark"
                                       Grid.Row="0"
                                       Width="16"
                                       Height="16"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       Fill="{StaticResource PhoneRadioCheckBoxCheckBrush}"
                                       IsHitTestVisible="False"
                                       Visibility="Collapsed" />
                            <Image x:Name="CheckMark"
                                   Width="24"
                                   Height="18"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   IsHitTestVisible="False"
                                   Source="accept.png"
                                   Stretch="Fill"
                                   Visibility="Collapsed" />
                            <ContentControl x:Name="ContentContainer"
                                            Grid.Column="1"
                                            Margin="12,0,0,0"
                                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                            Content="{TemplateBinding Content}"
                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                            Foreground="{TemplateBinding Foreground}"
                                            Padding="{TemplateBinding Padding}" />
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot"
      Background="Transparent">
    <CheckBox IsChecked="True"
              Style="{StaticResource CheckBoxWithImageStyle}" />
</Grid>

Answer 2

Вы не можете напрямую использовать изображение для флажка, но вы можете использовать изображение для стандартного объекта Button и изменять фоновое изображение при каждом нажатии:

XAML:

<Button Click="Button_Click" x:Name="btnCheckbox">
                    <Button.Content>
                        <Image Source="Checkbox_Unselected.png" />
                    </Button.Content>
                </Button>

Код позади:

private bool isCheckboxChecked = false;
private void Button_Click(object sender, RoutedEventArgs e)
{
    isCheckboxChecked = !isCheckboxChecked;
    this.CheckboxImage.Source = new System.Windows.Media.Imaging.BitmapImage(new Uri((isCheckboxChecked ? "Checkbox_Selected.png" : "Checkbox_Unselected.png")));
}

Очевидно, что было бы еще лучше связать isCheckboxChecked со свойством в вашей модели, а не с частной переменной.