Round button inverted example please?

Apr 1, 2012 at 4:13 AM

I have this:

 <Controls:RoundButton ImageSource="/My_Forums;/icons/{0}/appbar.feature.search.rest.png" Margin="0,17,16,0" BorderBrush="Black" Foreground="#FF010000" HorizontalAlignment="Right" Width="80" Height="53" Tap="SearchButton_Tap"/>

The "My_Forums": is the project name and folder name

The /icons/{0}/appbar.feature.search.rest.png is for the light and dark pictures. All I get is a round black button?


Coordinator
Apr 1, 2012 at 4:18 AM
Edited Apr 1, 2012 at 4:18 AM

looks like the documentation is wrong and has been for a long time.

just point the ImageSource toward your image and you'll be set.  No need for multiple images or anything

<c4f:RoundButton
ImageSource="/Toolkit.Content/ApplicationBar.Cancel.png"
Content="text" />

Apr 1, 2012 at 4:26 AM
Edited Apr 1, 2012 at 4:27 AM

Ok, I've changed it to:

<Controls:RoundButton ImageSource="icons/appbar.feature.search.rest.png" Margin="0,17,16,0"  HorizontalAlignment="Right" Width="80" Height="53" Tap="SearchButton_Tap" BorderBrush="Black" Foreground="Black"/>

The icon shows correctly and responds to input. How do I make it inverted? When I press the button I thought the background was supposed to turn black and the icon white?

 

 

Btw, thank you for responding quickly

Coordinator
Apr 1, 2012 at 4:29 AM

see test application, change foreground / background to whatever you want.  http://msdn.microsoft.com/en-us/library/ff769552(v=VS.92).aspx

 

think you want PhoneContrastBackgroundBrush and PhoneContrastForegroundBrush

Coordinator
Apr 1, 2012 at 4:30 AM

Also BorderBrush

Coordinator
Apr 1, 2012 at 4:31 AM

wondering why you're setting the height

Apr 1, 2012 at 4:44 AM

I just set the height because then the grid lines look more organized in expression blend.

 

This is what I'm using now:

<Controls:RoundButton ImageSource="icons/appbar.feature.search.rest.png" Margin="0,17,16,0"  HorizontalAlignment="Right" Width="80" Height="53" Tap="SearchButton_Tap" Foreground="{StaticResource PhoneContrastForegroundBrush}" Background="{StaticResource PhoneContrastBackgroundBrush}">
						<Controls:RoundButton.BorderBrush>
							<SolidColorBrush Color="{StaticResource PhoneBackgroundColor}"/>
						</Controls:RoundButton.BorderBrush>
					</Controls:RoundButton>

 

The button is on a white background. When I tap the button the border just disappears and the background doesn't turn black. Do you think you could make up an example where the button has a black border,black search image where the background of the button turns black and the search image turns white?

Apr 1, 2012 at 4:52 AM

Is it supposed to invert the colors when I press it?

Coordinator
Apr 1, 2012 at 5:00 AM

if your app isn't theme aware, just do <Controls:RoundButton Foreground="Black" BorderBrush="Black" Background="White" />

looking at the XAML, i don't think you can templatebind a storyboard property so i don't think currently you can set the what happens after.  The control is designed to be theme aware via leveraging the theme brushes like PhoneAccentBrush and PhoneContrastBackgroundBrush.  I know what i'd do to correct this, just this is the first someone has requested this.  This is a bigger issue with the RoundToggleButton as someone pressing a RoundButton on a physical device would barely notice this.  You could go in and create a new style for the control and just override the VisualState at that point.

For this control, i don't think you should be setting the height / width.  IMO, tweak the margins rather than tweaking the control's height / width.

Apr 1, 2012 at 5:07 AM

Ok, I understand now.  I'm actually new to C# and windows phone programming. Your right to say that the user will most probably not notice any changes when the roundbutton is pressed since the finger will cover the button.

For informative purposes, how would I make an app theme aware so that the roundbutton reacts to the press like I wanted?

Coordinator
Apr 1, 2012 at 6:28 AM

created a bug to get this fixed.  right now you'd have to create a custom style to override the pressed visual state