Windows Phone 7 (WP7) Изменение цвета фона кнопки при нажатии - PullRequest
Новая
       22

Windows Phone 7 (WP7) Изменение цвета фона кнопки при нажатии

37 голосов
/ 13 августа 2010

Кажется, это действительно очень простая проблема, но я не могу понять это. Виновным кажется стиль WP7 по умолчанию. При нажатии кнопки цвет фона меняется на белый, а затем возвращается к фону кнопки по умолчанию.

Проблема в том, что я хочу изменить фон кнопки при нажатии кнопки. Я не могу найти какой-либо возможный способ сделать это.

Я пытался установить фон в коде, но это ничего не делает. Я думаю, что он перезаписывается стилем по умолчанию.

Я пытался использовать поведение «Изменение свойства» в Blend, но результат тот же.

Я пытался создать новое визуальное состояние для кнопки и установить его при нажатии, но это немного глючит и имеет большие издержки для количества кнопок, с которыми я имею дело. Кроме того, это не сработало.

Я могу установить фон других кнопок для события щелчка, но не для кнопки, которую нажимают.

Это такой раздражающий блокпост! Я уверен, что это один из вариантов кода. :)

Ответы [ 4 ]

47 голосов
/ 13 августа 2010

Что вам нужно сделать, это создать шаблон кнопки, который изменяет визуальное состояние Pressed.

В Blend, нажмите кнопку, выберите пункт меню «Объект» -> «Редактировать шаблон» -> «Редактировать копию ...», и новый шаблон будет создан. В окне «Состояния» выберите визуальное состояние «Нажатие» в группе визуальных состояний «CommonStates». Теперь выберите ButtonBackground в иерархии объектов и отредактируйте кисть фона в окне «Свойства».

Я отредактировал фон для состояния Pressed, чтобы он стал сплошным голубым цветом, и в итоге получил что-то вроде этого 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>
1 голос
/ 13 августа 2010

Я думаю, что получить ссылку на реальный фон, а затем изменить это может помочь.Вот метод, который возьмет экземпляр кнопки. 

        private void HighlightButton(Button btnToHighlight)
        {

            SolidColorBrush sBrush = (SolidColorBrush)btnToHighlight.Background;


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

        }
0 голосов
/ 24 октября 2012

Чтобы изменить фон кнопки при нажатии кнопки, я использую шаблоны.Как указал Мэтт, откройте проект в Blend.Перейдите к кнопке> Щелкните правой кнопкой мыши> Изменить шаблон> Изменить копию.Новый шаблон для вашей кнопки будет создан и добавлен в ближайшее начало вашей страницы XAML.

Теперь, поскольку вам нужно изменить поведение кнопок при нажатии кнопки, вам нужно изменить VisualState.Перейдите в визуальное состояние «Pressed» и всмотритесь в него.Это «спрессованное» визуальное состояние.

<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 голосов
/ 19 июля 2011 
<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>
...