2011-10-04 77 views

回答

0

不能直接複選框使用圖像,但你可以一個標準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的財產在你的模型,而不是私法甚至更好吃了變量。

+0

我明白了。您的解決方案是使用按鈕而不是複選框。但實際上,複選框標記只是字母V,我想將其更改爲小圖片。如果沒有其他方法,我會嘗試你的代碼。謝謝 – geeko

+0

您只需更改ContentTemplate中的圖像即可,完全可行。 –

2

只需編輯它的模板,它的超級容易。您將名爲CheckMark的對象Path更改爲圖像,並且您是黃金版。

<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>