CODEWITHSUNDEEP
c#xamlwindows-phone-8.1
Anbarasi
Anbarasi

Reputation: 421

Remove space above the Pivot Item

I have passed empty data context to the pivot header template. It having a space above the pivot item. How too get rid of the space

Below is my xaml code

 <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>

Below is the xaml.cs part

 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);
        }

Below is the 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);
            }
        }
    }

Below is the Article Class

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;
        }
    }

Below is the image which i am getting

enter image description here

Please guide me to get rid of the space above the pivot item. It looks more space above the pivot item and look awkward

Upvotes: 0

Views: 89

Answers (4)

Anbarasi
Anbarasi

Reputation: 421

You can use negative value as margin to remove that blank space. Simply try

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

Replace 25 with your desired value.

Upvotes: 0

Chirag Shah
Chirag Shah

Reputation: 981

I guess the space is caused by the header, try removing the header template of the pivot. That should do,if not,provide more info about the layout you are trying to achieve using the pivot.

Upvotes: 0

jrb
jrb

Reputation: 1728

Set verticalAlignment to top or set row height to auto

Upvotes: 0

ΩmegaMan
ΩmegaMan

Reputation: 31606

Here are some things to do:

  1. Remove the Grid around the image Maalaimalar_logo.png it is superfluous and not needed. That may adding space.

  2. Either use a StackPanel or use a Grid to hold the template items. Using both is not helping. Change the template to:

    <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>

Upvotes: 0

Related Questions