web-dev-qa-db-ja.com

Windows Phone 7（WP7）クリックでボタンの背景色を変更する

これは本当に簡単な問題のようですが、わかりません。犯人はWP7のデフォルトスタイルのようです。ボタンがクリックされると背景色が白に変わり、ボタンのデフォルトの背景に戻ります。

私が抱えている問題は、ボタンがクリックされたときにボタンの背景を変更したいことです。これを行うための可能な方法を見つけることができません。

コードで背景を設定しようとしましたが、それは何もしません。デフォルトのスタイルで上書きされていると思います。

Blendでプロパティ変更ビヘイビアーを使用してみましたが、まったく同じ結果になります。

ボタンの新しい視覚的状態を作成してクリック時に設定しようとしましたが、少しバグがあり、処理するボタンの数に大きなオーバーヘッドがあります。また、機能しませんでした。

クリックされるボタンだけでなく、クリックイベントで他のボタンの背景を設定できます。

これはとても厄介な障害です！これは1行のコードのような答えだと思います。 :)

windowsexpression-blendwindows-phone-7
37
Jason

あなたがする必要があるのは、Pressedの視覚的状態を変更するボタンテンプレートを作成することです。

ブレンドで、ボタンを選択し、メニュー項目「オブジェクト」->「テンプレートの編集」->「コピーの編集...」をクリックすると、新しいテンプレートが作成されます。 [状態]ウィンドウで、CommonStates視覚状態グループの[Pressed]視覚状態を選択します。次に、オブジェクト階層でButtonBackgroundを選択し、[プロパティ]ウィンドウで背景ブラシを編集します。

押された状態の背景をシアンっぽい無地の色に編集して、このXAMLのようなものになりました。

<phone:PhoneApplicationPage ...>
    <phone:PhoneApplicationPage.Resources>
        <Style x:Key="ButtonStyle1" TargetType="Button">
            <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="{StaticResource PhoneBackgroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ColorAnimation Duration="0" To="Cyan" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonBackground" d:IsOptimized="True"/>
                                        </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>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}" Background="Black">
                                <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Button Content="Button" Style="{StaticResource ButtonStyle1}"/>
    </Grid>
</phone:PhoneApplicationPage>
47
Matt Casto

実際の背景への参照を取得し、それを変更することが役立つと思います。以下は、インスタンスをボタンにするメソッドです。

        private void HighlightButton(Button btnToHighlight)
        {

            SolidColorBrush sBrush = (SolidColorBrush)btnToHighlight.Background;


            sBrush.Color = //enter your colour here
            btnToHighlight.Background = sBrush;

        }
1
keyboardP
<ControlTemplate x:Key="ButtonNextOver" TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00" Storyboard.TargetProperty="Background" Storyboard.TargetName="hoverbutton">
                                        <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                            <DiscreteObjectKeyFrame.Value>
                                                <ImageBrush ImageSource="/NhomMua;component/Image/ico_next_over.png"/>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused"/>
                            <VisualState x:Name="Unfocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="hoverbutton">
                        <Border.Background>
                            <ImageBrush ImageSource="/NhomMua;component/Image/ico_next.png"/>
                        </Border.Background>
                    </Border>
                </Grid>
            </ControlTemplate>
0
thongaduka

ボタンが押されたときにボタンの背景を変更するには、テンプレートを使用します。 Mattが指摘したように、Blendでプロジェクトを開きます。ボタン>右クリック>テンプレートの編集>コピーの編集に移動します。ボタンの新しいテンプレートが作成され、XAMLページの最初の方に追加されます。

ここで、ボタンが押されたときのボタンの動作を変更する必要があるため、VisualStateを変更する必要があります。 「押された」視覚状態に向かい、それをじっくりと見ます。これは「押された」視覚状態です。

<VisualState x:Name="Pressed">
 <Storyboard>
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
           <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
      </ObjectAnimationUsingKeyFrames>
           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
      <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
      </ObjectAnimationUsingKeyFrames>
      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush">
           <DiscreteObjectKeyFrame KeyTime="0" Value="#FF373737" />
      </ObjectAnimationUsingKeyFrames>
 </Storyboard>

＃FF373737の値を任意の値に変更します。これで準備が整いました。

0
Saif Al Falah