移除 Pivot Item 上方的空间

Question

我已将空数据上下文传递给数据透视表头模板。它在枢轴项目上方有一个空间。如何摆脱空间

下面是我的 xaml 代码

 <Page.Resources>
    <ViewModels:ArticleViewModel x:Key="ViewModel" />
    <DataTemplate x:Key="headerTest">
    </DataTemplate>
    <DataTemplate x:Key="pivotTemplate">
        <StackPanel>
            <Grid HorizontalAlignment="Left" Margin="-25 0 -25 0">
                <Image x:Name="ArticleImage" Source="{Binding ImageURL}"></Image>
                <Grid>
                    <Border VerticalAlignment="Bottom" Height="65" Background="Black" Opacity="0.5">
                    </Border>
                    <TextBlock x:Name="HeadLine" Text="{Binding HeadLine}" VerticalAlignment="Bottom" 
                                           Margin="10 0 0 5" TextWrapping="Wrap" 
                                           FontSize="20" Foreground="White"
                                           Pivot.SlideInAnimationGroup="GroupTwo"
                                           FontWeight="Bold" />
                </Grid>
            </Grid>
        </StackPanel>
    </DataTemplate>
</Page.Resources>
<Page.BottomAppBar>
    <CommandBar>
        <CommandBar.PrimaryCommands>                
            <AppBarButton x:Uid="Share">
                <AppBarButton.Icon>
                    <BitmapIcon UriSource="/Assets/Share.png"/>
                </AppBarButton.Icon>
            </AppBarButton>
            <AppBarButton Icon="Favorite"/>
            <AppBarButton Icon="Comment"></AppBarButton>
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.BottomAppBar>

<Grid Background="Gray">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="60"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>

        <Grid Grid.Row="0">
            <Image Source="Assets/Maalaimalar_logo.png" HorizontalAlignment="Center" Margin="1 5 0 0"></Image>
        </Grid>

        <ScrollViewer Grid.Row="1">
            <Pivot DataContext="{StaticResource ViewModel}" x:Name="pivot" 
                             HeaderTemplate="{StaticResource headerTest}" 
                   ItemTemplate="{StaticResource pivotTemplate}" ItemsSource="{Binding Articles}">
            </Pivot>
        </ScrollViewer>
    </Grid>
</Grid>

下面是xaml.cs部分

 Feed data = new Feed();
        public ArticleDescriptionPage()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            data = e.Parameter as Feed;
            List<Article> feedList = new List<Article>();
            feedList = data.Articles;
            var viewModel = pivot.DataContext as ArticleViewModel;
            viewModel.BindListToView(feedList);
        }

下面是 ArticleViewModel

 public class ArticleViewModel : BindableBase
    {
        ObservableCollection<Article> articlesList = new ObservableCollection<Article>();

        public ArticleViewModel()
        {

        }

        public void BindListToView(List<Article> articleList)
        {
            Articles = new ObservableCollection<Article>(articleList);
        }

        /// <summary>
        /// 
        /// </summary>
        public ObservableCollection<Article> Articles
        {
            get { return this.articlesList; }
            set
            {
                Set<ObservableCollection<Article>>(ref this.articlesList, value);
            }
        }
    }

下面是文章类

public class Article
    {
        /// <summary>
        /// 
        /// </summary>
        public string Title { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public string HeadLine { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public string ImageURL { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public string Abstract { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public string ArticleDetail { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public string ArticleId { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public Article()
        {

        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="title"></param>
        /// <param name="headline"></param>
        /// <param name="imageURL"></param>
        /// <param name="articleAbstract"></param>
        /// <param name="articleDetail"></param>
        public Article(string title, string headline, string imageURL, string articleAbstract, string articleDetail, string articleId)
        {
            Title = title;
            HeadLine = headline;
            ImageURL = imageURL;
            Abstract = articleAbstract;
            ArticleDetail = articleDetail;
            ArticleId = articleId;
        }
    }

下面是我得到的图像

请指导我摆脱枢轴项目上方的空间。它看起来在枢轴项目上方有更多空间并且看起来很尴尬

Answer 1

这里有一些事情要做：

1. 删除图像周围的Grid Maalaimalar_logo.png 这是多余的，不需要。这可能会增加空间。

2. 使用StackPanel 或Grid 来保存模板项。两者都使用没有帮助。将模板更改为：

   <DataTemplate x:Key="pivotTemplate">
       <Grid>
           <TextBlock Text="Test"></TextBlock>
           <Image Source="{Binding ImageURL}" ></Image>
           <Grid>
               <Border VerticalAlignment="Bottom" Height="65" Background="Black" Opacity="0.5">
               </Border>
               <TextBlock Text="{Binding HeadLine}" VerticalAlignment="Bottom" Margin="5 0 0 15" TextWrapping="Wrap" FontSize="{ThemeResource ContentControlFontSize}" Foreground="White" FontWeight="Bold" />
           </Grid>
       </Grid>
   </DataTemplate>
   

Answer 2

将verticalAlignment设置为top或将行高设置为auto

Answer 3

我猜空间是由表头引起的，尝试删除数据透视表的表头模板。应该这样做，如果没有，请提供有关您尝试使用枢轴实现的布局的更多信息。

Answer 4

您可以使用负值作为边距来删除该空白区域。试试看

<Pivot Margin="0, -25, 0, 0">

将 25 替换为您想要的值。