locked
Button minimum size

    Question

  • Hi  All,

    In my universal apps project I want to create a squared button with width and height of 50 using the following code.

    <Button 
    	Grid.Row="0" Grid.Column="1" BorderThickness="0" Width="50">
    	<Button.ContentTemplate>
    		<DataTemplate>
    			<Grid Height="50" Width="50" HorizontalAlignment="Left" VerticalAlignment="Top">
    				<Rectangle Fill="{StaticResource TsColorVariant2}" Width="56"/>
    				<Path Width="32" Height="32" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 35,19L 41,19L 41,35L 57,35L 57,41L 41,41L 41,57L 35,57L 35,41L 19,41L 19,35L 35,35L 35,19 Z "/>
    			</Grid>
    		</DataTemplate>
    	</Button.ContentTemplate>
    </Button>

    However, the button width always remains at least 109px. So it seems there is a minimum size to a button. I even tried to change the control template without any luck. What am I missing here?

    Regards, Stephan

    Tuesday, May 13, 2014 10:46 PM

Answers

  • Nope, that unfortunately didn't work either. In the end, I had to change MinWidth and MinHeight. It seems like that the minimum width is about 109 which led to the problem.

    Anyway, thanks for your suggestion.

    • Marked as answer by arens Monday, June 16, 2014 7:59 PM
    Monday, June 16, 2014 7:59 PM

All replies

  • Hi, you should use Button.Template, please try this:

            <Button Grid.Row="0" Grid.Column="1" BorderThickness="0" Width="50">
                <Button.Template>
                    <ControlTemplate>
                        <Grid Height="50" Width="50" HorizontalAlignment="Left" VerticalAlignment="Top">
                            <Rectangle Fill="{StaticResource TsColorVariant2}" Width="56"/>
                            <Path Width="32" Height="32" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 35,19L 41,19L 41,35L 57,35L 57,41L 41,41L 41,57L 35,57L 35,41L 19,41L 19,35L 35,35L 35,19 Z "/>
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
            </Button>

    • Proposed as answer by Dave SmitsMVP Wednesday, May 14, 2014 9:12 AM
    • Unproposed as answer by arens Wednesday, May 14, 2014 11:26 AM
    Wednesday, May 14, 2014 3:34 AM
  • Hi Dave,

    nope. As I said in my post: "I even tried to change the control template..." (i.e. Button.Template). Even this does not work.

    Regards, Stephan

    Wednesday, May 14, 2014 11:26 AM
  • Hi arens,

    Probably you may need to set the padding as "0" instead of default "12,4,12,4". Take a look at Button styles and templates for more information. Or do I miss something?

    <Setter Property="Padding" Value="0"/>

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by Jamles HezModerator Tuesday, May 27, 2014 9:59 AM
    • Unmarked as answer by arens Monday, June 16, 2014 7:59 PM
    Thursday, May 22, 2014 6:09 AM
    Moderator
  • Nope, that unfortunately didn't work either. In the end, I had to change MinWidth and MinHeight. It seems like that the minimum width is about 109 which led to the problem.

    Anyway, thanks for your suggestion.

    • Marked as answer by arens Monday, June 16, 2014 7:59 PM
    Monday, June 16, 2014 7:59 PM