Windows Phone 8.1中元素適應螢幕寬度或子項目繼承父元素寬度的解決方案

標籤：元素適應螢幕寬度   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中元素適應螢幕寬度或子項目繼承父元素寬度的解決方案