locked
Sketch Button Content Alignment RRS feed

  • Question

  • It appears that the Sketch-Button style forces content to be Center/Center.   The HorizontalContentAlignment and VerticalContentAlighment have no effect on the Sketch-Button.   If you change the ContentPresenter value in the SketchStyles.XAML file for a Sketchflow project then these properties work.   If you change the button to a Standard button this works fine.

    I am wanting to create some Sketch-Buttons that display their content text in the top left part of the button.  But I also want to create buttons where the text is centered.   

    What is the best way to do this with Sketch-Button styles?



    Jeff Davis


    • Edited by JeffD503 Thursday, February 14, 2013 7:40 PM
    Thursday, February 14, 2013 7:39 PM

Answers

  • I don't know why the styles are the way they are, probably just wasn't ever an expected use case for the sketch styled button. For whatever reason, the Silverlight version is already correct, but the WPF verison isn't.

    In your project, open sketchstyles.xaml and edit the button style like this. The only changes are to the horizontal and vertical alignment for the ContentPresenter. Then you can set HorizontalContentAlignment and VerticalContentAlignment on the button like the default button. This will only apply for your current project.

    You can do this either in the text editor, or you can right click a sketch button and select edit template -> edit current. Select the content presenter, then in the properties pane fine Horizontal/Vertical alignment, click the box next to it, template binding -> HorizontalContentAlignment (note HorizontalContentAlignment vs HorizontalAlignment). Same for vertical.

    <!-- Sketch Button -->
    	<Style x:Key="Button-Sketch" TargetType="{x:Type Button}" BasedOn="{x:Null}">
    		<Setter Property="FontFamily" Value="{DynamicResource FontFamily-Sketch}"/>
    		<Setter Property="FontSize" Value="{DynamicResource SizeDouble-Sketch}"/>
    		<Setter Property="Foreground" Value="{DynamicResource BaseForeground-Sketch}"/>
    		<Setter Property="BorderBrush" Value="{DynamicResource BaseBorder-Sketch}"/>
    		<Setter Property="Background" Value="{DynamicResource BaseBackground-Sketch}"/>
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="{x:Type Button}">
    					<!-- We use Grid as a root because it is easy to add more elements to customize the button -->
    					<Grid x:Name="Grid">
    						<!-- Content Presenter is where the text content etc is placed by the control -->
    						<SketchControls:SketchRectangleUC x:Name="SketchRectangleUC" BorderBrush="{TemplateBinding BorderBrush}" ExtensionLength="0" ExtensionVariance="0" StrokeWidth="2" SegmentLength="8" Background="{TemplateBinding Background}" SegmentVariance="0.1" SegmentOffset="0.12" FocusVisualStyle="{DynamicResource FocusControl-Sketch}"/>
    						<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" Margin="8,0,8,0"/>
    					</Grid>

    • Proposed as answer by Chuck HaysModerator Friday, February 15, 2013 2:50 AM
    • Marked as answer by JeffD503 Friday, February 15, 2013 11:49 PM
    Friday, February 15, 2013 2:50 AM
    Moderator

All replies

  • Could you set something like a grid as the content and have it position the children where you want them? You could do that with the non inline syntax. I haven't tried that, but it seems like you could get the grid to take up all the content space and then position its children.

    <button><button.content><grid><child/></grid></button.content></button

    Thursday, February 14, 2013 8:19 PM
    Moderator
  • Yea,I thought of that.  I could remove the content of the button and then just use a grid to place content where I wanted.   But since this is just a Sketchflow project to prototype a UI I didn't want to go to a lot o trouble to customize the button behavior.  Seems odd that you can't set the horizontal and vertical content properties so the text "Button" is not centered?   Or that there isn't a simple way to enable the feature for some buttons but not all.

     

    Jeff Davis

    Friday, February 15, 2013 12:44 AM
  • I don't know why the styles are the way they are, probably just wasn't ever an expected use case for the sketch styled button. For whatever reason, the Silverlight version is already correct, but the WPF verison isn't.

    In your project, open sketchstyles.xaml and edit the button style like this. The only changes are to the horizontal and vertical alignment for the ContentPresenter. Then you can set HorizontalContentAlignment and VerticalContentAlignment on the button like the default button. This will only apply for your current project.

    You can do this either in the text editor, or you can right click a sketch button and select edit template -> edit current. Select the content presenter, then in the properties pane fine Horizontal/Vertical alignment, click the box next to it, template binding -> HorizontalContentAlignment (note HorizontalContentAlignment vs HorizontalAlignment). Same for vertical.

    <!-- Sketch Button -->
    	<Style x:Key="Button-Sketch" TargetType="{x:Type Button}" BasedOn="{x:Null}">
    		<Setter Property="FontFamily" Value="{DynamicResource FontFamily-Sketch}"/>
    		<Setter Property="FontSize" Value="{DynamicResource SizeDouble-Sketch}"/>
    		<Setter Property="Foreground" Value="{DynamicResource BaseForeground-Sketch}"/>
    		<Setter Property="BorderBrush" Value="{DynamicResource BaseBorder-Sketch}"/>
    		<Setter Property="Background" Value="{DynamicResource BaseBackground-Sketch}"/>
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="{x:Type Button}">
    					<!-- We use Grid as a root because it is easy to add more elements to customize the button -->
    					<Grid x:Name="Grid">
    						<!-- Content Presenter is where the text content etc is placed by the control -->
    						<SketchControls:SketchRectangleUC x:Name="SketchRectangleUC" BorderBrush="{TemplateBinding BorderBrush}" ExtensionLength="0" ExtensionVariance="0" StrokeWidth="2" SegmentLength="8" Background="{TemplateBinding Background}" SegmentVariance="0.1" SegmentOffset="0.12" FocusVisualStyle="{DynamicResource FocusControl-Sketch}"/>
    						<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" Margin="8,0,8,0"/>
    					</Grid>

    • Proposed as answer by Chuck HaysModerator Friday, February 15, 2013 2:50 AM
    • Marked as answer by JeffD503 Friday, February 15, 2013 11:49 PM
    Friday, February 15, 2013 2:50 AM
    Moderator
  • Thanks so much for the tip.  That worked great.  

    Jeff Davis

    Friday, February 15, 2013 11:50 PM