Develop Reference

WPF ItemTemplate Causing ListBox Content Size Issue

In a WPF project, I have a ListBox that renders correctly if I manually insert items in XAML, e.g.:
<ListBoxItem>
<Grid Background="#7F271043" Width="200" Height="200">
<Grid.RowDefinitions>
<RowDefinition Height="110" />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="Logo-40p.png" HorizontalAlignment="Center" Margin="10,10,10,10" />
<TextBlock Grid.Row="1" Text="Test Item" Foreground="White" Margin="10,0,10,0" FontSize="16" VerticalAlignment="Center" />
<local:Rating Grid.Row="2" HorizontalAlignment="Left" Height="24" Margin="10,0,0,0" VerticalAlignment="Center" Width="130" SelectedValue="4" IsReadOnly="True" />
<TextBlock Grid.Row="2" Text="Free" Foreground="#FF969292" Margin="0,0,10,0" FontSize="14" HorizontalAlignment="Right" VerticalAlignment="Center" />
</Grid>
</ListBoxItem>
The bottom of the ListBoxItem looks like:
However, the moment I swap out <ListBoxItem> for:
<ListBox.ItemTemplate>
<DataTemplate>
Even if I keep everything else identical, it creates a sizing problem with my rating control that I'm unable to fix (doesn't respond to manual size or stretch settings):
Any thoughts on how to address this? Do ItemTemplate / DataTemplate do something that might cause a control to not respect the size manually set or set by the grid row it's in?

Managed to fix this - it seems that a manually defined ListBoxItem in XAML behaves differently from the output of an ItemTemplate / DataTemplate.
My rating user control had a set height and width specified that were overridden by the implementation XAML (height/width/stretch) inside a ListBoxItem but not inside a ItemTemplate / DataTemplate:
mc:Ignorable="d" Height="750" Width="4070" MouseLeave="UserControl_MouseLeave">
So I instead changed Height / Width to DesignHeight / DesignWidth to fix the issue:
mc:Ignorable="d" d:DesignHeight="750" d:DesignWidth="4070" MouseLeave="UserControl_MouseLeave">

Unable to reorder items in GridView when WrapPanel is used UWP

And am creating a sorting app and in some cases i will hide the gridview item and i encountered the same error as this person:
Hide GridViewItem and reposition items in GridView
So I implemented the fix and it worked, but it suddenly disallowed be to drag and reorder items in my GridView.And from what I can tell it only appeared after I implemented the WrapPanel into my gridView.ItemsPanel and by removing it I am immediately able to reorder again.
and here's my XML code:
<Page
x:Class="ImageSorting.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ImageSorting"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data ="using:ImageSorting.Models"
xmlns:toolkit="using:WinRTXamlToolkit.Controls"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid HorizontalAlignment="Stretch" Height="57" VerticalAlignment="Top">
<Border BorderBrush="Black" BorderThickness="0 0 0 1" HorizontalAlignment="Stretch" Height="57" VerticalAlignment="Top"/>
<Button x:Name="SelectFolder" Content="Select Folder" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,11,10,0" Background="#80a4ec" Click="SelectFolder_Click"/>
<Button x:Name="AddFolder" Content="Add Folder" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,11,125,0" Background="#84eeb1" Click="AddFolder_Click" />
<Button x:Name="Save" Content="Save" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,11,230,0" Background="#ece880" Click="Save_Click"/>
<ComboBox x:Name="ImageFolder" HorizontalAlignment="Left" VerticalAlignment="Top" Margin=" 20 11 0 0" SelectedIndex="0" SelectionChanged="ImageFolder_SelectionChanged">
<ComboBoxItem>All Images</ComboBoxItem>
</ComboBox>
</Grid>
<GridView x:Name="ImageGrid" HorizontalAlignment="Stretch" Margin="10,60,10,0" VerticalAlignment="Stretch" ItemsSource="{x:Bind ImgList, Mode=OneWay}" CanDragItems="True" AllowDrop="True" CanReorderItems="True" SelectionMode="Extended">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Images">
<StackPanel>
<Image x:Name="Image" Width="206" Height="158" Source="{x:Bind imageData}" DoubleTapped="Image_DoubleTapped"/>
<StackPanel Orientation="Horizontal">
<TextBlock HorizontalAlignment="Left" FontSize="15" Text="{x:Bind imageNumber}" Margin="10 5 0 0"/>
<TextBlock HorizontalAlignment="Left" TextAlignment="Left" Width="100" FontSize="15" Text="{x:Bind altChar}" Margin="10 5 0 0"/>
<CheckBox x:Name="altNumber" HorizontalAlignment="Right" MinWidth="0" Margin="35 0 0 0" Click="altNumber_Click"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" AllowDrop="True">
</toolkit:WrapPanel>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
<Grid x:Name="ConfirmGrid" HorizontalAlignment="Stretch" Height="50" VerticalAlignment="Bottom" Background="White" Visibility="Collapsed">
<Border BorderBrush="Black" BorderThickness="0 1 0 0" HorizontalAlignment="Stretch" Height="57" VerticalAlignment="Top" />
<Button x:Name="FolderConfirm" Content="Confirm" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,10,0" RenderTransformOrigin="-0.128,7.104" Click="FolderConfirm_Click" />
</Grid>
</Grid>
Image of when i try to drag and reorder GridView's Item with WrapPanel:
Am I missing something that is stated in the WinRTXamlToolkit, or there no way around this problem.
UPDATE 2017 Nov 27
So after some tinkering as suggested by # Xavier Xie - MSFT so try implement the drag and drop to reorder feature for winRT toolkit by inheriting the WrapPanel class and trying it from there.
Here's what I have found out so far,
winRT toolkit WrapPanel inherits Panel class
WrapPanel from other libraries like UWPCommunityToolkit
also inherits Panel hence making me thing that all Dynamic Wrapping needs to inherit the Panel class.
Panel class doesn't have any code for detecting item drag event (either that or I am dragging the wrong thing)
ItemsWrapPanel is a seal class making it impossible for me to inherit and that goes for any Interface it inherits as well
And this is concluded what I have found out so far and will continue to update this if I found anything.
Credits goes to # Xavier Xie - MSFT for pointing me into the right direction for this.

The WrapPanel of WinRTXamlToolkit has not implemented reordering function. You would need to implement the reordering manually, listening to the drag & drop events.
If you want to implement by yourself, you could read Jerry Nixon's blog Walkthrough: Reordering items in a GridView with Drag and Drop to understand the basic principle of GridView's reordering.
As a easy workaround, you could use ItemsStackPanel control as its ItemsPanel, it has implemented reordering function. This control also will not have space item there when you hide one item.

Grid wrap in ListView item

I have a very beautiful Grid control with a WebView in it and I am trying for more than 2 hours to wrap it in a ListViewItem.
This is my grid:
<Grid Width="450" Margin="0,-270,0,-200" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<WebView x:Name="Browser" Source="http://someurl.com" Margin="0,0,0,-150/>
</Grid>
and I am very happy with it's design.
When I try to wrap it in a ListViewItem the margins change a lot and I cant seem to find the correct one to make it look exactly the way the old Grid used to.
This is my ListView:
ListView x:Name="MyList1" BorderThickness="0" Width="500">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="450" Margin="0,-270,0,-200" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<WebView x:Name="Browser" Source="http://someurl.com" Margin="0,0,0,-150/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The margins are hiding some part of the WebView. Hence the reason I need exactly the same margin.
I am trying to wrap it to a ListView to be able to create multiple Items.

WPF controls do not align

NOTE: This is one of the first time I'm using WPF.
I am trying to align a certain control, let's say a button for now, in the bottom right corner. But when I debug my application, it misses 8 pixels to the bottom and right. I will attach 2 pictures to show you what happens.
How do I keep the button in place?
My XAML code:
<Window x:Class="Plugin_Manager.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Plugin Manager" Height="350" Width="525" Loaded="Window_Loaded_1">
<Grid x:Name="GridMain">
<Button Content="Refresh" Margin="432,288,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="75"/>
<ListView HorizontalAlignment="Left" Height="273" Margin="10,10,0,0" VerticalAlignment="Top" Width="497">
<ListView.View>
<GridView>
<GridViewColumn/>
</GridView>
</ListView.View>
</ListView>
</Grid>

If you choose to use Grid layout you should try to avoid placing objects via Margin. Margin should be used to create buffer around an object, not move it to a specific point in the window. Use the layout manager's power to your advantage!
Here is a Grid example that does what you are looking for.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListView Grid.Row="0" />
<Button Grid.Row="1" HorizontalAlignment="Right" Content="Push Me" />
</Grid>
I would also read up on Layout Manager in WPF. There are several; each having its own advantages & disadvantages.
Here is a DockPanel version.
<DockPanel>
<Button DockPanel.Dock="Bottom" HorizontalAlignment="Right" Content="Push Me" />
<ListView />
</DockPanel>
To create your buffer between the button and the window chrome you could do a few different things:
<Grid Margin="10"> will apply a 10 pixel space between all content and the window chrome on all side.
<Grid Margin="0,0,10,10"> would indent all content, but only on the right & bottom.
<Grid Margin="10,0,10,10"> indents all around, except the top (I commonly do this one, with a different margin value).
<Button Margin="0,0,10,10"> would indent only the button from the chrome (this is the direct answer to your comment question).
Replace the Grid above with DockPanel for the second example, or whatever other Layout Manager you are using.
A usability side note: Your confirmation buttons (I'm assuming your button will be an Ok/Cancel type button) should not be indented differently from the rest of your content. All controls that butt up against the right margin should do so at the same point (i.e., you can draw a vertical line down the right side of them all).
So, using your question's example: your button should not be indented 10 pixels to the right while your list box is not. Keeping things lined up will improve the overall look to your application.
(this ends my "usability and look-and-feel is important" side note) :)

<Button VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="5"/>

Some code example will help. Try using the alignment in xaml for your button as shown below. Ensure that the margins on the button are 0.
<Button Margin="0" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
Looking at the sample code, it is your margins and the alignment you have that are probably causing that.
Just some pointers that may help. Instead of using large margins to align the controls, I find it much easier to work with Column and Row definitions on the grid. This way you can align your controls using the grid and they will size properly as you resize your window. I attached an example in hopes it helps in your new adventures with WPF!
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Version Date" Margin="3" VerticalAlignment="Center"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding DateSubmitted}" Margin="3"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="Report" Margin="3" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding ReportName}" Margin="3"/>
</Grid>

How to adapt the app to multiple resolution in Windows8

I have the layout code below in xaml
<Grid>
<StackPanel x:Name="TestStackPanel" Grid.Row="2" Orientation="Horizontal">
<ScrollViewer x:Name="TestScrollViewer" Height="300" VerticalScrollBarVisibility="Auto">
<GridView x:Name="TestGridView"
Width="940"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
ItemTemplate="{StaticResource TestTemplate}"
ItemsPanel="{StaticResource TestItemPanelTemplate}"
ItemContainerStyle="{StaticResource TestItemStyle}"
SelectionMode="None"
HorizontalAlignment="Left"/>
</ScrollViewer>
<Button x:Name="TestButton" Content="ClickMe" VerticalAlignment="Bottom" Margin="10,5,0,0" Click="TestButton_Click"/>
</StackPanel>
</Grid>
This displays well in 1366*768 resolution, but if I change the resolution to 2560*1400, it couldn't displays as expected, I know it's certain, but how to adpat the layout to different resolutions? I have tried to add a ViewBox to encapsulate the Grid, it works well in FullScreenLandScape view, but when I change the app to Snap view, the Grid displays in a samll space.
Anyone can help?

Register to the LayoutUpdated event at the UI element.
And re-calculate the layout according to Window.Current.Bounds.Width.