我应该在Windows Phone 7的使用什么样的管制，使A＆QUOT;明星＆QUOT;控制 [英] 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?

推荐答案

您也可以使用矢量图形来实现这一点，而不使用PNG图标。

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

我创造了这个风格，而一去，基本上它是复选框，但我认为它也适用于切换按钮通过简单地改变的TargetType 从复选框到切换按钮。

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.

通过设置为复选框或切换按钮器isChecked >到真，明星将充满手机的强调色。

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

样式

    <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}" />

他们如何看待

这篇关于我应该在Windows Phone 7的使用什么样的管制，使A＆QUOT;明星＆QUOT;控制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！