0

次のようなボタンのカスタム スタイルを作成しました。

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="CustomButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="#464646" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="BorderThickness" Value="2" />
        <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="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ButtonNumber">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ButtonCharacters">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ButtonNumber">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ButtonCharacters">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="0">
                            <Canvas>
                                <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
                                <TextBlock Margin="23,14,0,0" FontFamily="Segoe WP SemiLight" FontSize="48" Foreground="{StaticResource PhoneForegroundBrush}" x:Name="ButtonNumber" Text="XXX" />
                                <TextBlock Margin="54,36,0,0" FontFamily="Segoe WP Light" FontSize="18" Foreground="{StaticResource PhoneForegroundBrush}" x:Name="ButtonCharacters" Text="YYY" />
                            </Canvas>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

ご覧のとおり、ボタン (ButtonNumberとButtonCharacters) 内に 2 つの新しい TextBlocks を追加しました。ここで、これら 2 つの TextBlocks (XXX と YYY でマーク) のプロパティにカスタム値を使用して、Text次のようにします。

<Button Style="{StaticResource CustomButtonStyle}" ButtonNumber.Text="123" ButtonCharacters.Text="SomeText" />

私は見当もつかない！

4

1 に答える 1

2

Buttonクラスを継承し、2つの依存関係プロパティ（たとえば、Text1とText2）を追加し、そのクラスに（しばらくの間TextButtonと呼びましょう）追加することをお勧めします。

次に、TextButtonの汎用テンプレート（/themes/generic.xaml内）を設定し、ControlTemplate内で次のマークアップを使用できます。

      <TextBlock x:Name="ButtonNumber" Text="{TemplateBinding Text1}" />
      <TextBlock x:Name="ButtonCharacters" Text="{TemplateBinding Text2}" />

これが最も簡単でベストプラクティスの方法です。

于 2012-07-06T13:18:05.230 に答える