自定義單選按鈕控件

-1

我試圖創建一個自定義單選按鈕，它具有按下狀態，正常，選中和未選中圖像。自定義單選按鈕控件

我在編譯時抱怨說單選按鈕不能有基於文本的內容。 ImageRadioButton does not support text content.

<RadioButton x:Class="BaseControls.ImageRadioButton" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    FontFamily="{StaticResource PhoneFontFamilyNormal}" 
    FontSize="{StaticResource PhoneFontSizeNormal}" 
    Foreground="{StaticResource PhoneForegroundBrush}" 
    d:DesignHeight="480" d:DesignWidth="480"> 
    <RadioButton.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.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}"> 
           <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
          </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> 
     <Style x:Key="RadioButtonStyle1" BasedOn="{StaticResource PhoneRadioButtonCheckBoxBase}" TargetType="RadioButton"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="RadioButton"> 
         <Grid Background="Transparent"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Normal"/> 
            <VisualState x:Name="MouseOver"/> 
            <VisualState x:Name="Pressed"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PressedImage"> 
               <DiscreteObjectKeyFrame KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <Visibility>Visible</Visibility> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NormalImage"> 
               <DiscreteObjectKeyFrame KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <Visibility>Collapsed</Visibility> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
           <VisualStateGroup x:Name="CheckStates"> 
            <VisualState x:Name="Checked"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="CheckedImage"> 
               <DiscreteObjectKeyFrame KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <Visibility>Visible</Visibility> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="UnCheckedlImage"> 
               <DiscreteObjectKeyFrame KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <Visibility>Collapsed</Visibility> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Unchecked"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="CheckedImage"> 
               <DiscreteObjectKeyFrame KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <Visibility>Visible</Visibility> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="UnCheckedlImage"> 
               <DiscreteObjectKeyFrame KeyTime="0"> 
                <DiscreteObjectKeyFrame.Value> 
                 <Visibility>Collapsed</Visibility> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Indeterminate"/> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Image x:Name="NormalImage" Source="{Binding Image}"/> 
          <Image x:Name="PressedImage" Source="{Binding PressedImage}" Visibility="Collapsed"/> 
          <Image x:Name="UnCheckedlImage" Source="{Binding Image}"/> 
          <Image x:Name="CheckedImage" Source="{Binding PressedImage}" Visibility="Collapsed"/> 
                 <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}"> 
          <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         </Border> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </RadioButton.Resources> 
    <RadioButton.Style> 
     <StaticResource ResourceKey="RadioButtonStyle1"/> 
    </RadioButton.Style> 
</RadioButton>

然後我用它像這樣

<ImageRadioButton Image="/Assets/normal.png" PressedImage="/Assets/pressed.png">Testing</ImageRadioButton>

它抱怨testing

我在做什麼錯？

來源

2011-11-21 Joseph Le Brech

您需要展示更多代碼，您如何定義此自定義控件以及您在何處使用它。 –

我已經更新了它的使用方式。 PressedImage和Image只是DependencyProperties –

它爲什麼叫做ImageRadioButton，但在xaml中叫做RadioButton？另外，您的控件是否繼承自ContentControl？你最好還是顯示你的代碼。 –

通常這意味着您已將一些純文本置於您不屬於的XAML中。我無法在您提供的XAML中看到這一點，但也許您確實已將它放在XAML的其他位置。

來源

2011-11-21 11:14:04

是的，我正在努力與風格和什麼可以和不能去那裏。 –

xaml中至少有一個問題。

在RadioButtonStyle1的禁用視覺狀態下，故事板嘗試對名爲ContentContainer的UIElement進行動畫處理，但是它不存在於該樣式中。

<VisualState x:Name="Disabled"> 
    <Storyboard> 
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> 
    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
    </ObjectAnimationUsingKeyFrames> 
    </Storyboard> 
</VisualState>

另外，我覺得你的控制需要從ContentControl繼承。

來源

2011-11-21 12:20:36

我已經更新到目前的內容。我仍然有同樣的問題。 –

我已經從頭開始在Expression Blend中，將RadioButton轉換爲UserControl並刪除了一些我不想要的東西，並且它抱怨同一件事，儘管ContentControl已經在那裏。 –

有與衆不同的btw UserControl和自定義控件。在你的情況下，你需要的是一個自定義控件，我相信你可以讓它繼承自普通的RadioButton，然後在其中添加額外的依賴屬性。 –

自定義單選按鈕控件

回答

相關問題