Какие элементы управления следует использовать в Windows Phone 7, чтобы сделать «звездный» элемент управления

Question

Я показываю некоторые элементы из базы данных в списке и хочу, чтобы пользователь мог пометить некоторые из них как избранные.Лучше всего было бы показать пользователю значок звездочки, по которому можно было бы кликнуть, и затем он превратился бы в немного другую звездочку, чтобы указать, что элемент теперь является любимым.Какие элементы управления я должен использовать для этих звезд?Могу ли я связать их с каким-либо логическим свойством элемента?

Answer 1

Вы также можете использовать векторную графику для достижения этой цели без использования значков png.

Я создал этот стиль некоторое время, в основном он предназначен для CheckBox, но я думаю, что он также работает для ToggleButton, просто изменив TargetType с CheckBox на ToggleButton.

Если для IsChecked из CheckBox или ToggleButton установлено значение True, звезда будет заполнена цветом акцента телефона.

Стиль

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

Применить стиль

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

Как они выглядят

Answer 2

Вы можете использовать ToggleButton , чтобы сделать это.Сохраняйте 2 звездных изображения в своем проекте, одно для клика, а другое для не кликали.Для переключения между двумя изображениями можно использовать привязку данных вместе со свойством IsChecked.

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" );
    }
  }
}

Класс, содержащийкод должен реализовывать интерфейс INotifyPropertyChanged.

Answer 3

См. здесь для получения списка звездообразных элементов управления, доступных для набора инструментов silverlight для Windows Phone.