Solutions for elements in Windows Phone 8.1 to accommodate screen widths or child elements that inherit the width of a parent element

In the Windows Phone development process, the different size of the mobile phone screen adaptation is a major programming requirements and challenges, of course, it is like doing a website to adapt to the

All kinds of computer screens are the same size.

Of course, in the development of WP, Microsoft has given us a lot of templates and controls that have been packaged well, in the final analysis, the layout controls:

Grid,stackpanel,canvas,pivot .....

Therefore, the differences on the pursuit of visual impact and aesthetics of the programmer, although to uphold the large layout of Microsoft, the content of the first strategy, but

Still don't like the established templates of Microsoft, so there are two of solutions.

A: The creation of the project is still using those templates, later in the case of reading those templates, the style, template changes and so on to meet their own

Please.

Two: Directly set up an empty template project, starting from scratch, design the foreground, design the UI, with various layout controls to write their own desired layout, unrestricted.

Fundamentally, however, you want to change the template of some controls to achieve the effect you want.

Of course, many people will think, the former spend less time, indeed, for the master, the established template is enough, repair change is very easy to do things. But

Yes, for learning, I prefer the latter, fundamentally understand how each control is used and how to customize it is what I need. So this

Should be more than the first flower, of course, people silly point I think I can learn a little more, of course, you can understand later to see the Microsoft Project template

It's best to solidify your knowledge.

Okay, nonsense, this is a question that I have encountered:

When I use the pivot control, of course, also in the custom style, it is necessary to set the width of the child element and the width of the parent element is equal, this time the problem

Just one by one.

<Grid>
        <Pivot x: Name = "pivot" Background = "Coral">
            <Pivot.Title>
                <Grid Background = "Green">
                    <TextBlock Text = "Anime" FontSize = "30" />
                </ Grid>
            </Pivot.Title>
            <PivotItem Header = "火影">
                <Grid>
                    <TextBlock Text = "Naruto Uzumaki" FontSize = "50" />
                </ Grid>
            </ PivotItem>
            <PivotItem Header = "Pirate">
                <StackPanel>
                    <TextBlock Text = "Monkey D Luffy" FontSize = "50" />
                </ StackPanel>
            </ PivotItem>
        </ Pivot>
</ Grid>




From the above code and can be seen, I set the Pivot background to Coral, Grid background to Green, Grid contains TextBlock control, but

Grid only has a green background in the range occupied by TextBlock, and what I need is that Grid occupies the entire row, which is the same width as Pivot.


How to solve it:

First of all, we must understand that the width of Pivot can not be specified, because it needs to adapt to different sizes of screens, so the width of the corresponding Grid can not mean

Dead, because it needs to be consistent with the width of Pivot, and the former will be different according to the screen size.

Secondly, we must realize that we can use this method of binding. That is, an element is bound to an attribute of other elements as its own attribute value.

Finally, distinguish the difference between the two attributes of the element Width and ActualWidth


Solution: Set the Width property of Grid to {Binding Path = ActualWidth, ElementName = pivot}


<Grid>
        <Pivot x: Name = "pivot" Background = "Coral">
            <Pivot.Title>
                <Grid Background = "Green" Width = "{Binding Path = ActualWidth, ElementName = pivot}">
                    <TextBlock Text = "Anime" FontSize = "30" />
                </ Grid>
            </Pivot.Title>
            <PivotItem Header = "火影">
                <Grid>
                    <TextBlock Text = "Naruto Uzumaki" FontSize = "50" />
                </ Grid>
            </ PivotItem>
            <PivotItem Header = "Pirate">
                <StackPanel>
                    <TextBlock Text = "Monkey D Luffy" FontSize = "50" />
                </ StackPanel>
            </ PivotItem>
        </ Pivot>
</ Grid>




That ’s it. Of course, there is still a distance in front of the Grid, and then you have to adjust it yourself.

This is just an idea, so you can do this when you encounter other similar needs.

Solutions for elements in Windows Phone 8.1 that adapt to the screen width or child elements inherit the width of the parent element