CODEWITHSUNDEEP
c#xamlwindows-8microsoft-metrowinrt-xaml
ReignOfComputer
ReignOfComputer

Reputation: 757

Image button style issues in XAML

I have a XAML code as follows:

<Button 
    x:Name="stopButton" 
    Click="Stop_Click" 
    IsEnabled="False" 
    HorizontalAlignment="Right" 
    Height="75" 
    Width="75" 
    Grid.Column="1" 
    Margin="0,15,60,0" 
    BorderBrush="{x:Null}" 
    Visibility="Collapsed" >
    <Button.Background>
        <ImageBrush ImageSource="Images/stop.png"/>
    </Button.Background>
</Button>

With stop.png being the following image

The button is enabled during an event in the app, and is pressed to stop media playback. When the button is pressed, it turns white as shown in the following image: Comparison between normal, hover and pressed states

I understand this is due to some Button Style issue, and was wondering how I would go about making this work better for me as a button.

Upvotes: 0

Views: 4782

Answers (3)

burusera
burusera

Reputation: 189

use visual states to change button style

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="btnEffect">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Pressed">
                 <Storyboard>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Text" Storyboard.TargetName="BackgroundGlyph">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="&#xE19A;" />
                    </ObjectAnimationUsingKeyFrames>
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="btnEffect">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Disabled">

              </VisualState>
            </VisualStateGroup>

          </VisualStateManager.VisualStateGroups>


          <StackPanel Name="btnEffect" Opacity="1"  Width="100" Height="100" Background="Gray" Canvas.ZIndex="100" >
              <TextBlock x:Name="BackgroundGlyph" Text="&#xE0A8;" 
                         FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0" 
                         Foreground="White"
                         Canvas.ZIndex="150"
            />

          </StackPanel>

        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Upvotes: 0

Farhan Ghumra
Farhan Ghumra

Reputation: 15296

You have to create custom style for your button. Set all the visual states as you want.

Button styles and templates

Upvotes: 1

Antonio Bakula
Antonio Bakula

Reputation: 20693

if this button is in AppBar Use predefined style for Stop button :

<Button Style="{StaticResource StopAppBarButtonStyle}" />

You just have to uncomment it in Common/StandardStyles.xaml (that file is included in project)

If button is not in AppBar you can set Segoe UI Symbol font and code for stop character :

<Button FontFamily="Segoe UI Symbol" Content="&#xE1B5;"/>

You can see symbols here :

http://blogs.msdn.com/b/mohamedg/archive/2012/10/12/useful-segoe-ui-symbols.aspx

Upvotes: 1

Related Questions