locked
Trouble Left Aligning a Button ControlTemplate RRS feed

  • Question

  • I have a ControlTemplate for a Button which contains the following code:
    <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="12" Background="{TemplateBinding Background}" Margin="{TemplateBinding Margin}" Padding="0">
    	<ContentControl x:Name="ContentContainer" Background="Transparent" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Margin="0" Padding="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
    </Border>

    This has worked great for me in all my projects until now. I am trying to left-align a Button with a left margin of 25, but what is happening is the margin is being applied twice. For example, if I use a left margin of 25, I see 50 spaces to the left of the Button. The same thing happens for the top, right, and bottom as well. But as you can see, I set the margin (and padding) in both the Border and ContentControl, so I am pretty sure that is not the problem. Why is my margin being applied twice? Any help would be appreciated. Thanks.

    Nathan Sokalski njsokalski@hotmail.com http://www.nathansokalski.com/

    Saturday, August 17, 2013 11:35 PM

Answers

  • The Margin is applied twice because you add the margin to the Border, but at the same time the Button itself gets 25. Usually the "internal" margin is handled with the padding value, and is set on the ContentControl. Here's how I would usually define a button that's essentially just a border + a content control:

    		<Style x:Key="ButtonStyle1" TargetType="Button">
    			<Setter Property="Margin" Value="25"/>
    			<Setter Property="Padding" Value="5"/>
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="Button">
    							<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="3">
    								<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    							</Border>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    


    /Morten
    twitter: http://www.twitter.com/dotMorten
    blog: http://www.sharpgis.net

    Sunday, August 18, 2013 4:39 AM

All replies

  • The Margin is applied twice because you add the margin to the Border, but at the same time the Button itself gets 25. Usually the "internal" margin is handled with the padding value, and is set on the ContentControl. Here's how I would usually define a button that's essentially just a border + a content control:

    		<Style x:Key="ButtonStyle1" TargetType="Button">
    			<Setter Property="Margin" Value="25"/>
    			<Setter Property="Padding" Value="5"/>
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="Button">
    							<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="3">
    								<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    							</Border>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    


    /Morten
    twitter: http://www.twitter.com/dotMorten
    blog: http://www.sharpgis.net

    Sunday, August 18, 2013 4:39 AM
  • OK, I set my Border's Margin to a static "0", and that seemed to fix it. Thanks.

    Nathan Sokalski njsokalski@hotmail.com http://www.nathansokalski.com/

    Sunday, August 18, 2013 8:42 PM