Question

我在XAML中有一个列表框代码，下面是我的代码：

<!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="2" Margin="12,0,12,0">
            <ListBox Name="listBox" 
                     HorizontalContentAlignment="Stretch" 
                     VerticalContentAlignment="Stretch" 
                     SelectionChanged="TopicListboxSelectionChanged"
                     ScrollViewer.VerticalScrollBarVisibility="Disabled" >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="0,0,0,10" Orientation="Horizontal">
                                <Border Background="Gray">
                                    <TextBlock Height="50" 
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       Text="{Binding Path=Value}"></TextBlock>
                                </Border>
                            </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>              
        </Grid>

现在我需要为列表框项添加样式，如下图所示，以及onclick效果。

如何使用Blend进行操作？因此，如果我需要明天将样式添加到任何其他项目，我可以自己添加它，而无需寻求任何帮助。

如果有任何可以学习的教程，请提供相关链接。

Answer 1

在页面中声明样式

页面中所有名称空间声明的下方

只需制作标签

<phone:PhoneApplicationPage.Resources>
</phone:PhoneApplicationPage.Resources>

并在其中声明以下样式

        <Style x:Key="style_ColorButton" TargetType="Button">
        <Setter Property="Background" Value="Gray"/>
        <Setter Property="BorderBrush" Value="Gray"/>
        <Setter Property="Foreground" Value="White"/>
        <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="Button">
                    <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="White"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Black">

                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Gray"/>
                                        </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">
                            <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>

将此样式与按钮一起使用。

<Button Height="40" Width="40" Name="btnAcceptCrop" Click="btnAcceptCrop_Click" Style="{StaticResource style_ColorButton}"/>

如何使用Blend为Listbox项添加样式

1 个答案: