右对齐全景标题

Question

似乎应该有一个非常简单的解决方案，但我找不到它，它正在杀了我......

我想做的就是将{em>右对齐刷新按钮（或图片，或其他）添加到Header中PanaromaItem的{​​{1}} ，所以按下它重新加载数据。 （见下图）

我尝试覆盖Panorama：

PanoramaItem.Header

我尝试使用<phone:PanoramaItem.Header> <Grid> <TextBlock Text="first item" /> <Image source="blah" HorizontalAlignment="Right" /> </Grid> </phone:PanoramaItem.Header> ，Grid，StackPanel以及我知道的所有其他布局控制器，除非我设置常量ViewPanel，否则无法实现此目的。< / p>

有什么想法吗？

Answer 1

不妨正确回答这个问题，只需要有人需要它。

您需要覆盖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>

---

结果截图：

Answer 2

我试过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>

Answer 3

默认情况下，当我们在全景项目标题中为图像设置水平对齐时，它不起作用但我们可以修复标题文本块的宽度并为图像设置正确的对齐方式。

      <controls:PanoramaItem.Header>

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

            </controls:PanoramaItem.Header>

Answer 4

如上所述here，您需要覆盖pivotitem模板以将Header的Horizo​​ntalAlignment设置为Stretch。 之后，您应该能够将标题中的内容对齐。