What kind of controls should I use in Windows Phone 7 to make a “star” control

问题

I show some items from the database in the list and I want the user to be able to mark some of them as favorites. The best way would be to show some star icon for user to click on which then would turn into slightly different star to indicate that the item is now favorite. What controls should I use for those stars? Could I bind them to some boolean property of the item?

回答1:

You can also use vector graphics to achieve this without using png icons.

I created this style a while a go, basically it is for CheckBox but I think it also works for ToggleButton by simply changing the TargetType from CheckBox to ToggleButton.

By setting the IsChecked of either CheckBox or ToggleButton to True, the star will be filled with the accent color of the phone.

The Style

    <Style x:Key="StarCheckBoxStyle" TargetType="CheckBox">
        <Setter Property="Background" Value="{StaticResource PhoneAccentBrush}" />
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused" />
                                <VisualState x:Name="Unfocused" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="00:00:00.2000000" />
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="check" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Indeterminate" />
                                <VisualState x:Name="Unchecked" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ValidationStates">
                                <VisualState x:Name="Valid" />
                                <VisualState x:Name="InvalidUnfocused" />
                                <VisualState x:Name="InvalidFocused" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="00:00:00.2000000" />
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="MouseOver" />
                                <VisualState x:Name="Pressed" />
                                <VisualState x:Name="Disabled" />
                                <VisualState x:Name="Normal" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Path x:Name="check" Stretch="Fill" Height="48" Width="48" UseLayoutRounding="False" Data="M16.000002,0 L19.77688,12.223213 L32,12.222913 L22.111122,19.776972 L25.888546,32 L16.000002,24.445454 L6.1114569,32 L9.8888807,19.776972 L8.574415E-09,12.222913 L12.223121,12.223213 z" Opacity="0" Fill="{TemplateBinding Background}" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" />
                        <Path x:Name="stroke" Stretch="Fill" Stroke="{TemplateBinding Background}" Height="48" Width="48" UseLayoutRounding="False" Data="M16.000002,0 L19.77688,12.223213 L32,12.222913 L22.111122,19.776972 L25.888546,32 L16.000002,24.445454 L6.1114569,32 L9.8888807,19.776972 L8.574415E-09,12.222913 L12.223121,12.223213 z" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" />
                        <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="0,0,8,0" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Apply the style

    <CheckBox Content="unchecked state" Style="{StaticResource StarCheckBoxStyle}" />
    <CheckBox IsChecked="True" Content="checked state" Style="{StaticResource StarCheckBoxStyle}" />

How they look

回答2:

You can use a ToggleButton to do this. Keep 2 star images in your project, one for clicked and the other for not clicked. You can use data binding along with the IsChecked property to switch between the 2 images.

XAML:

<ToggleButton IsChecked="{Binding IsFavorited, Mode=TwoWay}">
  <ToggleButton.Content>
    <Image Source="{Binding FavoriteImage}" />
  </ToggleButton.Content>
</ToggleButton>

C#:

Image ClickedImage = new Image() {
  Source = new BitmapImage(new Uri("/clicked.png", UriKind.Relative));
};
Image NotClickedImage = new Image() {
  Source = new BitmapImage(new Uri("/not_clicked.png", UriKind.Relative));
};
bool _isFavorited = false;
Image _favoriteImage = NotClickedImage;

public bool IsFavorited
{
  get { return _isFavorited; }
  set
  {
    if( _isFavorited != value ) {
      _isFavorited = value;
      NotifyPropertyChanged( "IsFavorite" );

      FavoriteImage = _isFavorited ? ClickedImage : NotClickedImage;
    }
  }
}

public Image FavoriteImage
{
  get { return _favoriteImage; }
  private set
  {
    if( _favoriteImage != value ) {
      _favoriteImage = value;
      NotifyPropertyChanged( "FavoriteImage" );
    }
  }
}

The class containing the code behind needs to implement the INotifyPropertyChanged interface.

回答3:

Refer here for a list of star controls available for the silverlight toolkit for the windows phone.

来源：https://stackoverflow.com/questions/8318038/what-kind-of-controls-should-i-use-in-windows-phone-7-to-make-a-star-control