2014-03-13 78 views
1

似乎應該有一個非常簡單的解決辦法,但我無法找到它,它的殺了我......右對齊全景頭

所有我想要做的就是添加一個右對齊刷新按鈕(或圖像,或其他)HeaderPanaromaItemPanorama,所以按它重新加載數據。 (請看下圖)

enter image description here

我試圖重寫PanoramaItem.Header

<phone:PanoramaItem.Header> 
    <Grid> 
     <TextBlock Text="first item" /> 
     <Image source="blah" HorizontalAlignment="Right" /> 
    </Grid> 
</phone:PanoramaItem.Header> 

,我試圖用GridStackPanelViewPanel和我知道所有其他排版控制器和不能實現這個,除非我設置一個常量width

有什麼想法?

+0

您是否找到了解決此問題的工作解決方案?我嘗試了所有建議,但仍然沒有運氣。 – stipe

+0

我發佈了一個很好的解決方案,沒有硬編碼值。 –

回答

2

不妨正確回答這個問題,只是爲了讓別人需要它。

您需要重寫PanoramaItemStyle並將Header ContentControl設置爲Stretch。

HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" 

這樣,當你應用模板時,它將覆蓋整個寬度。這是完整的覆蓋樣式模板。


<phone:PhoneApplicationPage.Resources> 
    <Style x:Key="Chubs_PanoramaItemStyle" TargetType="phone:PanoramaItem"> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
     <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="phone:PanoramaItem"> 
        <Grid Background="{TemplateBinding Background}" Margin="12,0,0,0"> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="auto"/> 
          <RowDefinition Height="*"/> 
         </Grid.RowDefinitions> 
         <ContentControl x:Name="header" CharacterSpacing="-35" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" FontSize="66" FontFamily="{StaticResource PhoneFontFamilySemiLight}" Margin="12,-2,0,38" HorizontalContentAlignment="Stretch"> 
          <ContentControl.RenderTransform> 
           <TranslateTransform x:Name="headerTransform"/> 
          </ContentControl.RenderTransform> 
         </ContentControl> 
         <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</phone:PhoneApplicationPage.Resources> 

現在套用樣式的PanoramaItem像這樣

<phone:PanoramaItem Style="{StaticResource Chubs_PanoramaItemStyle}"> 
    <phone:PanoramaItem.Header> 
     <Grid> 
      <TextBlock Text="header1"/> 
      <Image Source="/Assets/ApplicationIcon.png" Stretch="None" HorizontalAlignment="Right"></Image> 
     </Grid> 
    </phone:PanoramaItem.Header> 
</phone:PanoramaItem> 

和屏幕截圖效果:

enter image description here

0

我試圖horizo​​ntalalign =「右」是行不通的,但要實現這一目標,你可以設置左頁邊距:

<phone:PanoramaItem Header="My Books" Foreground="LightGray" Margin="-10,0,0,0"> 
        <phone:PanoramaItem.HeaderTemplate> 
         <DataTemplate> 
          <StackPanel Orientation="Horizontal"> 
          <TextBlock Foreground="#72C158" Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" Margin="0,30,0,0" FontSize="55" FontFamily="/Font/BKANT.TTF#Book Antiqua" TextAlignment="Left" FontWeight="Normal"/> 
          <Button Height="50" Width="50" Margin="130,20,0,0"/> 
          </StackPanel> 
         </DataTemplate> 
        </phone:PanoramaItem.HeaderTemplate> 
    </phone:PanoramaItem> 
+0

感謝您的回覆,但正如我在Q中提到的,我試圖避免設置一個常數值。 – MBZ

0

默認情況下,當我們設置水平對齊,以全景項頭中的圖像,然後它不工作但是我們可以修復標題文本塊的寬度併爲圖像設置對齊方式。

 <controls:PanoramaItem.Header> 

        <Grid> 
        <TextBlock Text="First" Width="400"/> 
         <Image Source="/ApplicationIcon.png" Width="60" Height="60" HorizontalAlignment="Right" /> 
        </Grid> 

      </controls:PanoramaItem.Header> 
+0

感謝您的回覆,但正如我在Q中提到的,我試圖避免設置恆定的寬度。 – MBZ

0

如上所述here,你將需要重寫pivotitem模板來設置頁眉,以舒展的Horizo​​ntalAlignment。 之後,您應該可以將東西對齊到標題的右側。