RoundButton size?

Jan 11, 2012 at 7:27 PM

Is there a way to change the size of the RoundButton? I've tried setting the height/width properties but i get a strange behaviour (the button is cropped strangely), I've also tried to reduce the size of the image but it doesn't work either, the image just displays worse (because of the resolution)

thanks

Coordinator
Jan 11, 2012 at 8:39 PM

This was something I was thinking about doing via a property setting, i just haven't found the time yet.  The properties would be ButtonWidth and ButtonHeight.

You'd have to adjust the template of the control which is 100% doable with Expression Blend.  Fairly easy to do.

Jan 11, 2012 at 9:42 PM

you mean modify the codebase and recompile, right?

Coordinator
Jan 11, 2012 at 11:40 PM
Edited Jan 12, 2012 at 3:05 PM
Update: this is wrong, see the following post on this thread for correct override:
no, you alter the template.  For your object: 
<c4f:RoundButton
	FontSize="48"
	Content="4"
	Background="CornflowerBlue"
 	Template="{StaticResource RoundButtonControlTemplate1}" />
THen here would be the proper "base" for the round button

<phone:PhoneApplicationPage.Resources><ControlTemplate x:Key="RoundButtonControlTemplate1" TargetType="c4f:RoundButton">
			<Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneContrastBackgroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneContrastBackgroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ButtonForeground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked" />
                                <VisualState x:Name="Indeterminate"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ButtonForeground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentBody">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>

                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle Fill="Transparent" />
                    
                        <StackPanel Orientation="{TemplateBinding Orientation}">
                        

                        <Grid Width="72" Height="72" Margin="0,-10, 0, 0">
							<Ellipse
								x:Name="ButtonBackground"
								Stroke="{TemplateBinding BorderBrush}" 
								StrokeThickness="{StaticResource PhoneStrokeThickness}" 
								Fill="{TemplateBinding Background}" 
								Margin="{StaticResource PhoneTouchTargetOverhang}" />
							<Ellipse
								x:Name="ButtonForeground" 
								Fill="{TemplateBinding Foreground}" 
								Margin="{StaticResource PhoneTouchTargetOverhang}">
								<Ellipse.OpacityMask>
									<ImageBrush x:Name="OpacityImageBrush" />
								</Ellipse.OpacityMask>
							</Ellipse>
						</Grid>

                        <ContentControl 
                            x:Name="ContentBody" 
                            Margin="0"
                            Content="{TemplateBinding Content}" 
                            FontSize="{TemplateBinding FontSize}" />
                    </StackPanel>
                    </Grid>
		</ControlTemplate>
	</phone:PhoneApplicationPage.Resources>
</phone:PhoneApplicationPage.Resources>
Jan 12, 2012 at 7:55 AM

 

 

 

I'm new to XAML have the same question ... following the suggestion above I changed the grid size and it resized my button, however the inverse color effect on mouse down is now broken?

 <Grid Width="72" Height="72" Margin="0,-10, 0, 0">
 
Coordinator
Jan 12, 2012 at 3:04 PM

actually I was wrong on my code

in phone:phoneapplicationpage.resources

       <Style x:Name="AppBarText" TargetType="ContentControl">
        	<Setter Property="HorizontalAlignment" Value="Center" />
        	<Setter Property="Margin" Value="0" />
        	<Setter Property="Padding" Value="0" />
        </Style>
        <Style x:Key="RoundButtonStyle1" TargetType="c4f:RoundButton">
        	<Setter Property="BorderBrush" Value="{StaticResource PhoneContrastBackgroundBrush}"/>
        	<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        	<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        	<Setter Property="FontSize" Value="12" />
        	<Setter Property="Padding" Value="10,3,10,5"/>
        	<Setter Property="VerticalAlignment" Value="Top"/>
        	<Setter Property="Template">
        		<Setter.Value>
        			<ControlTemplate TargetType="c4f:RoundButton">
        				<Grid>
        					<VisualStateManager.VisualStateGroups>
        						<VisualStateGroup x:Name="CommonStates">
        							<VisualState x:Name="Normal" />
        							<VisualState x:Name="MouseOver"/>
        							<VisualState x:Name="Pressed">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ButtonBackground">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneContrastBackgroundBrush}"/>
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="ButtonBackground">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneContrastBackgroundBrush}"/>
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ButtonForeground">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
        									</ObjectAnimationUsingKeyFrames>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="Disabled">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="ButtonBackground">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ButtonBackground">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ButtonForeground">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
        									</ObjectAnimationUsingKeyFrames>
        									<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentBody">
        										<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
        									</ObjectAnimationUsingKeyFrames>

        								</Storyboard>
        							</VisualState>
        						</VisualStateGroup>
        					</VisualStateManager.VisualStateGroups>
                        
        					<Rectangle Fill="Transparent" />
        					<StackPanel Orientation="{TemplateBinding Orientation}">

        						<Grid Width="150" Height="150" Margin="0,-10, 0, -3">
        							<Ellipse
        								x:Name="ButtonBackground"
        								Stroke="{TemplateBinding BorderBrush}" 
        								StrokeThickness="{StaticResource PhoneStrokeThickness}" 
        								Fill="{TemplateBinding Background}" 
        								Margin="{StaticResource PhoneTouchTargetOverhang}" />
        							<Ellipse
        								x:Name="ButtonForeground" 
        								Fill="{TemplateBinding Foreground}" 
        								Margin="{StaticResource PhoneTouchTargetOverhang}">
        								<Ellipse.OpacityMask>
        									<ImageBrush x:Name="OpacityImageBrush" />
        								</Ellipse.OpacityMask>
        							</Ellipse>
        						</Grid>
                        
        						<ContentControl 
        							x:Name="ContentBody" 
        							Content="{TemplateBinding Content}" 
        							FontSize="{TemplateBinding FontSize}"
        							Style="{StaticResource AppBarText}"/>
        					</StackPanel>
        				</Grid>
        			</ControlTemplate>
        		</Setter.Value>
        	</Setter>
        </Style>

on the physic button:

<c4f:RoundButton
                            ImageSource="/Toolkit.Content/ApplicationBar.Cancel.png"
                            Click="RoundButtonBasicClick" 
							Style="{StaticResource RoundButtonStyle1}">
							Basic
						</c4f:RoundButton>
Coordinator
Jan 23, 2012 at 12:44 AM

Added in direct ability to do this now.

<c4f:RoundButton
	ButtonWidth="100"
	ButtonHeight="100"
	Click="RoundButtonBasicClick">
	Custom Size
</c4f:RoundButton>
Jan 23, 2012 at 9:07 PM

cool man, thanks for the quick response!!