Question

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?

Answer 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