Windows Phone 8.1中元素适应屏幕宽度或子元素继承父元素宽度的解决方案

在Windows Phone开发过程中，对不同尺寸手机屏幕的适应是对编程的一大要求和挑战，当然这就像做网站要适应各

种各样的电脑屏幕的大小一样.

当然在WP开发这一点上，微软给了我们很多中已经封装好布局的模板和控件，归根结底，还是那几个布局控件：

Grid,StackPanel,Canvas,Pivot.....

所以，分歧就来了，对于追求视觉上冲击和美观的程序员来说，虽说要秉承微软的大块布局，内容为先的策略，但是

依旧不喜欢微软的那些既定的模板，所以解决方案就有两个。

一：创建项目时依旧用那些模板，后期在读懂那些模板的情况下，对其进行样式，模板的更改等等以符合自己的要

求。

二：直接建立一个空模板项目，从零开始，自己设计前台，设计UI，用各种布局控件写自己想要的布局，不受限制。

但从根本上来说，还是要更改一些控件的Template来实现自己想要的效果。

当然，很多人会想，前者花的时间肯定少，确实，对于高手来说，既定模板已经足够，修修改改是很容易的事情。但

是，对于学习的来说，我比较喜欢后者，从根本上弄懂每个控件怎么使用的以及如何自定义的才是我需要的。所以这

应该比第一种花的时间长的多，当然人傻点我觉得还是能学的多一点，当然可以后期弄懂了去看微软给你的项目模板

巩固一下你的认识是最好不过的了。

好了废话不说了，这篇就说一下我遇到的一个问题：

在我用Pivot控件的时候,当然也是在自定义样式的时候，需要设定子元素的宽度和父元素的宽度相等，这个时候难题

就一个一个接着来了。

<Grid>        <Pivot x:Name="pivot" Background="Coral">            <Pivot.Title>                <Grid Background="Green">                    <TextBlock Text="动漫" FontSize="30" />                </Grid>            </Pivot.Title>            <PivotItem Header="火影">                <Grid>                    <TextBlock Text="漩涡鸣人" FontSize="50" />                </Grid>            </PivotItem>            <PivotItem Header="海贼">                <StackPanel>                    <TextBlock Text="蒙奇D路飞" FontSize="50" />                </StackPanel>            </PivotItem>        </Pivot></Grid>

从上面的代码和截图可以看出，我设置了Pivot背景为Coral，Grid背景为Green，Grid里面包含了TextBlock控件，但

是Grid就只有在TextBlock占据的范围内背景为绿色的，而我需要的是Grid占据整个一行，和Pivot的宽度是一样的。

那怎么解决呢：

首先要认识一点，Pivot的宽度是不可以指定死的，因为它要适应不同尺寸的屏幕，所以相应的Grid的宽度也不能指

定死，因为它需要与Pivot的宽度一致，而前者要根据屏幕尺寸的不同宽度会不同。

其次呢，我们要认识到可以用绑定这个方法。就是一个元素绑定其他元素的一个属性作为自己的一个属性值使用

最后呢，分清楚元素Width和ActualWidth两个属性的区别

解决方案：给Grid的Width属性设置成{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="动漫" FontSize="30" />                </Grid>            </Pivot.Title>            <PivotItem Header="火影">                <Grid>                    <TextBlock Text="漩涡鸣人" FontSize="50" />                </Grid>            </PivotItem>            <PivotItem Header="海贼">                <StackPanel>                    <TextBlock Text="蒙奇D路飞" FontSize="50" />                </StackPanel>            </PivotItem>        </Pivot></Grid>

以上，就可以了。当然Grid前面还有距离，之后就要靠自己的自定义调节了。

这边只是提供一个想法，所以遇到其他类似的需求时，就可以这么做了。