码迷,mamicode.com
首页 > Windows程序 > 详细

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

时间:2015-04-07 10:07:07      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:元素适应屏幕宽度   windows phone 8.1   子元素继承父元素宽度   自定义pivot标题样式   wp的binding数据绑定   

在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前面还有距离,之后就要靠自己的自定义调节了。

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

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

标签:元素适应屏幕宽度   windows phone 8.1   子元素继承父元素宽度   自定义pivot标题样式   wp的binding数据绑定   

原文地址:http://blog.csdn.net/u010792238/article/details/44903781

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!