3

Silverlight ボタンのスタイル テンプレートを作成し、丸みを帯びた角とスタイルの大部分を問題なく変更するホバー状態を作成することができました...

Foregroundで色を変更する方法がわかりませんhover。

以下の私のコードを参照してください。私が問題を抱えている部分は現在コメントアウトされています。

    <Style TargetType="Button" >
        <Setter x:Name="myFontColor" Property="Foreground" Value="#000000"/>
        <Setter Property="FontSize" Value="11"/>
        <Setter Property="FontStyle" Value="Normal"/>
        <Setter Property="FontFamily" Value="Arial"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid Height="28">
                        <Border x:Name="myBorder" BorderBrush="#C4C4C4" BorderThickness="1" CornerRadius="5">
                            <Rectangle x:Name="BackgroundGradient" RadiusX="5" RadiusY="5">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop x:Name="GradientStop1" Color="#FDFDFD" Offset="0" />
                                        <GradientStop x:Name="GradientStop2" Color="#D6D6D6" Offset="1" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                        </Border>
                        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommomStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimation 
                                                    Storyboard.TargetName="GradientStop1"
                                                    Storyboard.TargetProperty="Color"
                                                    From="#FDFDFD" To="#0A284B" 
                                                    Duration="0"
                                                    />
                                        <ColorAnimation 
                                                    Storyboard.TargetName="GradientStop2"
                                                    Storyboard.TargetProperty="Color"
                                                    From="#D6D6D6" To="#135887"
                                                    Duration="0"
                                                    />

                                        <ColorAnimation 
                                                    Storyboard.TargetName="myBorder" 
                                                    Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
                                                    From="#C4C4C4" To="#000000" 
                                                    Duration="0"
                                            />
                                        <!--<ColorAnimation
                                                    Storyboard.TargetName="myFontColor" 
                                                    Storyboard.TargetProperty="Foreground"
                                                    From="#000000" To="#FFFFFF" 
                                                    Duration="0"
                                            />-->
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Silverlight にはかなり慣れていないので、これが正しい要素とスタイルを対象とする単純な問題であることを願っています。

Foreground色を変更するにはどうすればよいhoverですか？

前もって感謝します

4

4 に答える 4

8

まず、ContentPresenter内部ContentControl（これにはForegroundプロパティがあります）を配置します。次に、背景の場合と同じように変更できます。

<Style TargetType="Button" >
    <Setter x:Name="myFontColor" Property="Foreground" Value="#000000"/>
    <Setter Property="FontSize" Value="11"/>
    <Setter Property="FontStyle" Value="Normal"/>
    <Setter Property="FontFamily" Value="Arial"/>
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Grid Height="28">
                    <Border x:Name="myBorder" BorderBrush="#C4C4C4" BorderThickness="1" CornerRadius="5">
                        <Rectangle x:Name="BackgroundGradient" RadiusX="5" RadiusY="5">
                            <Rectangle.Fill>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop x:Name="GradientStop1" Color="#FDFDFD" Offset="0" />
                                    <GradientStop x:Name="GradientStop2" Color="#D6D6D6" Offset="1" />
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                    </Border>
                    <!-- CONTENT CONTROL HERE -->
                    <ContentControl Name="content" VerticalAlignment="Center" HorizontalAlignment="Center">
                    <ContentPresenter  />
                    </ContentControl>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommomStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation 
                                        Storyboard.TargetName="GradientStop1"
                                        Storyboard.TargetProperty="Color"
                                        From="#FDFDFD" To="#0A284B" 
                                        Duration="0"
                                        />
                                    <ColorAnimation 
                                        Storyboard.TargetName="GradientStop2"
                                        Storyboard.TargetProperty="Color"
                                        From="#D6D6D6" To="#135887"
                                        Duration="0"
                                        />

                                    <ColorAnimation 
                                        Storyboard.TargetName="myBorder" 
                                        Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
                                        From="#C4C4C4" To="#000000" 
                                        Duration="0"
                                />


                                   <!-- ALTERNATIVE WAY 

                                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Foreground)" Storyboard.TargetName="content">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="White" />
                                                </ObjectAnimationUsingKeyFrames>-->


                                    <ColorAnimation
                                        Storyboard.TargetName="content" 
                                        Storyboard.TargetProperty="(UIElement.Foreground).(SolidColorBrush.Color)"
                                        From="#000000" To="#FFFFFF" 
                                        Duration="0"
                                />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
于 2012-07-13T07:17:59.563 に答える
1

これを試して：

<Style x:Key="CustomButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="#FF1F3B53"/>
    <Setter Property="Foreground" Value="#FF000000"/>
    <Setter Property="Padding" Value="3"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFA3AEB9" Offset="0"/>
                <GradientStop Color="#FF8399A9" Offset="0.375"/>
                <GradientStop Color="#FF718597" Offset="0.375"/>
                <GradientStop Color="#FF617584" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FF474747"/> <!--change this color code if you wish-->
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FF474747"/> <!--change this color code if you wish-->
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FF474747"/> <!--change this color code if you wish-->
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FF474747"/> <!--change this color code if you wish-->
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="DarkGray"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="DarkGray"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="DarkGray"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="DarkGray"/>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="DarkGray"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="DarkGray"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="DarkGray"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="DarkGray"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Background" CornerRadius="3" Background="White" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                        <Grid Background="{TemplateBinding Background}"  Margin="1">
                            <Border Opacity="0"  x:Name="BackgroundAnimation" Background="#FF448DCA" />
                            <Rectangle x:Name="BackgroundGradient" >
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                        <GradientStop Color="#A9A9A9" Offset="0" />
                                        <GradientStop Color="#A5A5A5" Offset="0.375" />
                                        <GradientStop Color="#A3A3A3" Offset="0.625" />
                                        <GradientStop Color="#A0A0A0" Offset="1" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                        </Grid>
                    </Border>
                    <ContentPresenter
                          x:Name="contentPresenter"
                          Content="{TemplateBinding Content}"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          Margin="{TemplateBinding Padding}"/>
                    <Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#A9A9A9" Opacity="0" IsHitTestVisible="false" />
                    <Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
于 2012-07-13T07:35:37.960 に答える
1

イベント MouseEnter および MouseLeave を追加し、イベントの色を変更することでそれを行うことができます

例：

<Button x:Name="myButton" 
    Content="Button" 
    MouseEnter="myButton_MouseEnter" 
    MouseLeave="myButton_MouseLeave"/>

クラスC＃では、メソッドが必要です

    private void myButton_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
    {
        myButton.Foreground=new SolidColorBrush(Colors.Red);
    }

    private void myButton_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
    {
        myButton.Foreground=new SolidColorBrush(Colors.White);
    }

それがあなたが探しているものであることを願っています。

于 2012-07-13T07:12:57.660 に答える
1

Blend を使用して、任意のコントロールを設計します。これを使用すると、必要なスタイルを簡単に作成できます

ボタンの作成に進んでください

于 2012-07-13T07:13:17.920 に答える