删除数据透视表项目上方的空间

时间:2016-06-30 13:20:22

标签: c# xaml windows-phone-8.1

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

以下是我的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;
        }
    }

以下是我得到的图片

enter image description here

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

4 个答案:

答案 0 :(得分:0)

以下是一些可以做的事情:

  1. 移除图片package javaapplication4; import java.util.*; public class Practice { public static void main (String[] args){ int[] a = {12,1,12,3,12,1,1,2,3,3}; int len = a.length; int[] b = new int[len]; int c; int d; for (c=0;c<len;c++){ d=a[c]; System.out.println(d); System.out.println(b[d]); } } } 周围的Grid,这是多余的,不需要。这可能会增加空间。
  2. 使用Maalaimalar_logo.png或使用StackPanel来保存模板项。使用两者并没有帮助。将模板更改为:

    Grid

答案 1 :(得分:0)

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

答案 2 :(得分:0)

我猜这个空间是由标题引起的,请尝试删除数据透视表的标题模板。如果没有,那应该提供有关您尝试使用数据透视表实现的布局的更多信息。

答案 3 :(得分:0)

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

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

将25替换为您想要的值。