locked
Xaml control layout is inexplicable

    Question

  • Hi,

    I have a button as described here :

                <Button x:Name="button1" Width="100" Height="100">
                    <Grid>
                        <Rectangle Width="100" Height="100">
                            <Rectangle.Fill>
                                <SolidColorBrush Color="Blue" />
                            </Rectangle.Fill>
                        </Rectangle>
                    </Grid>
                </Button>

    But this is what i get back ...

    This is not what the code describes as far as I'm concerned. I expect a button that is completely blue from edge to edge. Can someone please point me to the 'invisible code'?

    Thanks

    Thursday, February 19, 2015 6:10 AM

Answers

  • You only set the contents of the button. If you want to change the basic look (the rectangular border) you'll need to edit the buttons template.

    In the designer right click on the button and choose Edit template...

    Thursday, February 19, 2015 6:36 AM
    Owner
  • The default button template includes a rectangular border into which the buttons contents are drawn. Typically the contents are text, but one can put in any UiElement.

    In your case you put a grid with a blue rectangle inside the button. From your description you want to change the buttons template rather than putting your rectangle inside the existing template.

    Thursday, February 19, 2015 7:40 AM
    Owner

All replies

  • You only set the contents of the button. If you want to change the basic look (the rectangular border) you'll need to edit the buttons template.

    In the designer right click on the button and choose Edit template...

    Thursday, February 19, 2015 6:36 AM
    Owner
  • Thanks for the quick response. I'll take a look at the template. So maybe there are predefined templates that are automatically defined, or else a template that was in the project previously was inadvertently being applied, because I was playing with buttons (pasting in code from elsewhere, but had deleted it all).

    Thursday, February 19, 2015 6:57 AM
  • The default button template includes a rectangular border into which the buttons contents are drawn. Typically the contents are text, but one can put in any UiElement.

    In your case you put a grid with a blue rectangle inside the button. From your description you want to change the buttons template rather than putting your rectangle inside the existing template.

    Thursday, February 19, 2015 7:40 AM
    Owner
  • Ok, fixed, thanks again for you help. I didn't realize that templates are so pervasive throughout the UI system, I thought they were more an optional thing. Looking at this page: Button styles and templates the default templates are described for the button control. There's a lot of flexibility there.
    • Edited by Gavin..Williams Thursday, February 19, 2015 7:36 PM fixed formatting
    Thursday, February 19, 2015 7:34 PM