CODEWITHSUNDEEP
xamllistviewwindows-8alignment
alfah
alfah

Reputation: 2085

ListView alignment issue in Windows 8

I have a strange issue, I tried every trick I knew to centre align the ListView placed inside a grid. No matter what, it looks like it is left aligned. The width and height of the ListView is data bound. (Width can take values 350 or 700 and height can take 100 or 200 depending on the Size settings. If size settings is compact it should be 350x100 and and if normal 700x200).

This is the xaml code

<Grid x:Name="GridPageLVPortrait" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4" Background="Beige" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,0,584.714,0" Width="781">
   <ListView x:Name="PageLVPortrait" ItemsSource="{Binding}" CanReorderItems="True" AllowDrop="True" HorizontalAlignment="Center" SelectionMode="Single" IsSwipeEnabled="True" IsItemClickEnabled="True" SelectionChanged="PageLVPortraitSelectionChanged" ItemClick="PageLVPortraitItemClick" Height="{Binding TemplateHeight}" Width="{Binding TemplateWidth}" >
        <ListView.ItemTemplate>
             <DataTemplate>
                 <Canvas HorizontalAlignment="Center" Width="{Binding TemplateWidth}" Height="{Binding TemplateHeight}">
                     <Canvas.Background>
                          <ImageBrush ImageSource="{Binding PageBackground}"/>
                     </Canvas.Background>
                     <Image HorizontalAlignment="Center" Height="{Binding TemplateHeight}" Width="{Binding TemplateWidth}" Source="{Binding Page}" Stretch="None" Opacity="1" CacheMode="BitmapCache" />

                     <StackPanel x:Name="EditDeleteStackPanel" Width="{Binding TemplateWidth}" Height="{Binding TemplateHeight}" Opacity="0.95">
                         <Button x:Name="NoteDelete"  HorizontalAlignment="Right"   VerticalAlignment="Top" Foreground="{x:Null}" Tapped="NoteDelete_Tapped" MinWidth="50" MinHeight="50" Margin="0,0,10,0" BorderBrush="{x:Null}" >
                            <Button.Background>
                                <ImageBrush ImageSource="{Binding Delete}"/>
                            </Button.Background>
                         </Button>
                         <Button x:Name="NoteEdit"  HorizontalAlignment="Right"   VerticalAlignment="Top"   FontFamily="Segoe Script" FontSize="24" BorderBrush="{x:Null}" Tapped="NoteEdit_Tapped" Foreground="{x:Null}" MinWidth="50" MinHeight="50" Margin="0,0,10,0">
                            <Button.Background>
                                <ImageBrush ImageSource="{Binding Edit}"/>
                            </Button.Background>
                         </Button>                             
                     </StackPanel>
                 </Canvas>
             </DataTemplate>
        </ListView.ItemTemplate>
   </ListView>
</Grid>

Could someone kindly help?

Upvotes: 0

Views: 357

Answers (2)

alfah
alfah

Reputation: 2085

I had found the issue. It is because the main grid is spit into 4 columns. And since this one uses columnspan, the alignment gets messed up.

Upvotes: 0

VasileF
VasileF

Reputation: 2916

I've tried your code, in a whole page Grid with the normal dimension convention you provided (700x200). The listview does get center aligned if I ignore the grid's Margin="0,0,584.714,0". If you need the 584px in the right of the page, I'd say better put a grid's column there with that width.

Upvotes: 1

Related Questions