We Keep Coding

UWP - Rotating an Image while keeping it aligned to the grid, using XAML only

Using Windows Template Studio, I created a (mostly auto-generated) sample UWP application, which shows a bunch of Images within a GridView.
In order to rotate them, I've used the following xaml - note RenderTransform block which I've added, and the comments within that scope:
<Grid x:Name="ContentArea">
<GridView
x:Name="ImagesGridView"
ItemsSource="{x:Bind Source}"
IsItemClickEnabled="True"
Padding="{StaticResource MediumLeftRightMargin}"
SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate x:DataType="models:SampleImage">
<Image
x:Name="galleryImage"
Style="{StaticResource ThumbnailImageStyle}"
Source="{x:Bind Source}"
AutomationProperties.Name="{x:Bind Name}"
ToolTipService.ToolTip="{x:Bind Name}">
<Image.RenderTransform> <!-- That's the part which I've added, on top of the auto-generated xaml -->
<RotateTransform Angle="90" CenterX="114" CenterY="114" /> <!-- because the ThumbnailImageStyle defines width and height as 228 -->
</Image.RenderTransform>
</Image>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
So that worked fine - until I tried non-square photos.
At this stage, the result was that the image itself would sometimes show outside of its container within the grid:
I've tried:
To use different values for the CenterX and CenterY fields (according to the grid's item size, according to the original image size, or just "0.5, 0.5"), but that didn't solve the case.
To use Image.LayoutTransform (as suggested here), but it doesn't seem to be available in a Universal Application (or perhaps I'm missing some reference?).
Noticed that when I click on the problematic images, they will suddenly move back to their expected location within the grid (and also sometimes the rotation will be gone, so its back to the original image).
Eventually, I solved it by rotating the image in the code-behind (like here), before adding it to the binded source of the GridView - but shouldn't there be a proper way to achieve that just by using the xaml itself?

So that worked fine - until I tried non-square photos. At this stage, the result was that the image itself would sometimes show outside of its container within the grid:
If u want the image will rotate with center and it will not display outside GridView. you could set RenderTransformOrigin property.
<Image Width="100" Height="100" RenderTransformOrigin="0.5,0.5"
Source="{Binding}">
<Image.RenderTransform>
<!-- That's the part which I've added, on top of the auto-generated xaml -->
<RotateTransform Angle="90" />
<!-- because the ThumbnailImageStyle defines width and height as 228 -->
</Image.RenderTransform>
</Image>
Update
When the GridView item clicked, the default Pressed visual statue will make the content of gridview re-layout. Currently, there is a workaround that use GridViewItemExpanded style.
<GridView ItemContainerStyle="{StaticResource GridViewItemExpanded}"

Two longlistselectors or two columns of different data binding within longlistselector. Possible?

I am trying to figure out how to have two columns of different binded data on one page. The left column for sounds the right for a save ringtone task for each sound.
I can't put two longlistselectors on one page, it wont let me.
Using a sample, its easy to see how to used binded data for the sound. And the great thing is you only have to enter new code into the binded items and it automatically populates each page with new sound tiles.
Id like to add a save ringtone tile that would essentially work the same way. But it would only make sense if I can get the save ringtone tiles next to the sound tiles on the same page.
Is there any way to do this? All I really need to know, I think, is how to get two columns of different data bindings onto the same page, hopefully in a longlistselector so it will scroll.
Here is a sample of the code im using now.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="SoundTileDataTemplate">
<Grid Background="{StaticResource PhoneAccentBrush}"
Margin="0,0,135,0">
<Grid VerticalAlignment="Top"
HorizontalAlignment="right"
Width="40"
Height="40"
Margin="0, 6, 6, 0">
<Ellipse Stroke="{StaticResource PhoneForegroundBrush}"
StrokeThickness="3"/>
<Image Source="/Assets/AppBar/Play.png" />
</Grid>
<StackPanel VerticalAlignment="bottom">
<TextBlock Text="{Binding Title}"
Margin="6,0,0,6"/>
</StackPanel>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
<phone:Pivot Title="{Binding Path=LocalizedResources.ApplicationTitle,
Source={StaticResource LocalizedStrings}}">
<!--Pivot item one-->
<phone:PivotItem Header="{Binding Animals.Title}">
<!--Double line list with text wrapping-->
<phone:LongListSelector Margin="0,0,-12,0"
ItemsSource="{Binding Animals.Items}"
LayoutMode="List"
ItemTemplate="{StaticResource SoundTileDataTemplate}"
SelectionChanged="LongListSelector_SelectionChanged">
</phone:LongListSelector>
</phone:PivotItem>
</phone:Pivot>
</Grid>

Easy solution.
<DataTemplate x:Key="NewItemTemplate">
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal" >
<StackPanel Orientation="Horizontal" Width="56">
<CheckBox x:Name="CheckBox1" HorizontalAlignment="Left" IsChecked="{Binding Checked, Mode=TwoWay}" BorderBrush="Black" Style="{StaticResource CheckBoxStyleGrey1}" Width="90" Height="74" />
</StackPanel>
<StackPanel Orientation="Horizontal" RenderTransformOrigin="0.5,0.5" Width="803" >
<StackPanel.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</StackPanel.RenderTransform>
<TextBlock Text="{Binding lItem}" Foreground="Black" FontSize="45" Margin="-176,0,0,0" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Text="{Binding lCategory}" Foreground="Black" Margin="-146,0,-2,0" RenderTransformOrigin="0.5,0.5" >
<TextBlock.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
Edit the ItemTemplate based on your needs, and you might have to play around with it in blend if there is an error. In Blend, go to your long list selector and edit the item template.

First of all, by aiming to add 2 long list selectors next to each other, you are approaching to this problem from a very wrong perspective. That's bad for the user, bad for UX, bad for the sake of UI design and bad for the unicorns.
You are trying to associate a functionality (Save ringtone) within another LongListSelector, to the corresponding Item in another Long List Selector. What an earth made you think that adding another Long List Selector and populating it with many Save Ringtone buttons is going to solve your problem? For a second, let's say you somehow achieve adding two Long List Selectors next to each other and deployed your items on the left selector and save ringtone buttons on the right. How you are planning to correctly associate them when they are scrolled? User will scroll the left one and the right Long List Selector will remain static.
You shouldn't add one more Long List Selector to your front. Instead you should go and modify your ItemTemplate in one Long List Selector. Then you will be able to have more than one tile, button, text or whatever you need for one single LongListSelector Item.
ItemTemplate="{StaticResource SoundTileDataTemplate}"
I am not going to submit a solution to add more than one button/tile/text for one LongListSelector item and associate their communication/functionality. Because there are already some 5 million example on the internet about this.
I highly recommend reading Design Guidelines for Windows Phone for you. Because you have such ideas that will result as one more crappy app on the Store. People really got enough of crappy apps. So please either completely stop developing apps for Windows Phone or give a break to whatever you are doing now and go read the design principles.

How to implement parallax background on a grouped GridView inside Semantic Zoom

I'm trying to implement a nice-looking horizontally scrolled gridview inside my app. I have already implemented it using the Q42.WinRT library like this:
<Canvas>
<StackPanel Orientation="Horizontal" Height="768">
<StackPanel.RenderTransform>
<CompositeTransform
TranslateX="{Binding ElementName=MyScrollViewer, Path=HorizontalOffset, Converter={StaticResource ParallaxConverter}}" />
</StackPanel.RenderTransform>
<Image Source="/Assets/3.jpg" Width="1366" Stretch="UniformToFill"/>
<Image Source="/Assets/1.jpg" Stretch="UniformToFill"/>
<Image Source="/Assets/2.jpg" Stretch="UniformToFill"/>
</StackPanel>
</Canvas>
<ScrollViewer
x:Name="MyScrollViewer"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Auto"
VerticalScrollMode="Disabled"
VerticalAlignment="Center"
Height="768">
<GridView>
//...my gridview goes here
</GridView> </ScrollViewer>
Everything works fine, however in my app I need to use semantic zoom, and I found that semantic zoom does NOT WORK properly when put inside a ScrollViewer.
Generally all the solutions for parallactic backgrounds that I found on the internet implement some kind of functionality over a scrollviewer, which is unfortunate for me as I cannot use it.
Can anybody think of another way to achieve the desired effect?

Generally putting GridViews inside a ScrollViewer is not a great idea since they already have ScrollViewers inside of them...
You should put your 2 GridViews inside a SemanticZoom.
Perhaps you could edit the template for your GridView and put a parallax background in there - perhaps as a Canvas with some content that responds to the ViewChanged events on the GridView.
EDIT*
You inspired me to try to write a ParallaxBackgroundBehavior for the Toolkit. :)
You can see an early version here. There is also a sample included.

ItemDroppedOnTarget in DragDropTarget should have target element

I'm using DragDropListBoxTarget control from Silverlight Toolkit to support the drag and drop behavior. But I'm facing with a problem with this control.
It's hard to get hold of target element on which the item is dropped. It is a must to have thing in ItemDroppedOnTarget event arguments.
When I drag an item, I need when the user drops it, an intermediate event should modify the target Item. But I can't find the way to implement it.
Am I using the right control, or what another alternatively do I have?

I had the same problem. I ended up using this drag-drop tool. I recompiled the source for Silverlight 5. It lets me know the target. I was also lazy and still wanted the ghost-drag pic of whatever you're dragging when using the toolkit DragDropTarget controls, so I kept my source wrapped in that and also wrapped in the new drag-drop tool.
The way I defined the dragging:
<toolkit:ListBoxDragDropTarget AllowedSourceEffects="Copy">
<ListBox ItemsSource="{Binding Path=UnitOfWork.Templates}" Width="130" Height="360" BorderThickness="0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<dd:DragSource>
<TextBlock Text="{Binding Path=Name}" Width="120"/>
</dd:DragSource>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</toolkit:ListBoxDragDropTarget>
<dd:DropTarget Grid.Row="2" AllowDrop="True" OnDropped="Target_OnDropped">
<Border BorderBrush="Black" BorderThickness="1" Width="98" Height="30">
<TextBlock Text="Drop Here" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</dd:DropTarget>
This way keeps the dragging ghost that the ListBoxDragDropTarget creates, while allowing me to use the dd:DragSource and dd:DropTarget controls to allow finer-grained drag-drops.

Where is the "ListViewItemPlaceholderBackgroundThemeBrush" located?

I have a problem understanding one style definition in Windows 8 metro apps.
When you create a metro style application with VS, there is also a folder named
Common
created. Inside this folder there is file called
StandardStyles.xaml
Now the following snippet is from this file:
<!-- Grid-appropriate 250 pixel square item template as seen in the GroupedItemsPage and ItemsPage -->
<DataTemplate x:Key="Standard250x250ItemTemplate">
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding Image}" Stretch="UniformToFill"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
What I do not understand here is the static resource definition, e.g. for the Border
Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"
It is not about how you work with templates and binding and resources.
Where is this ListViewItemPlaceholderBackgroundThemeBrush located?
Many thanks for your help.
Dimi

In Windows 8 customer preview you can find the file containing the resources' definition (including ListViewItemPlaceholderBackgroundThemeBrush) at:
C:\Program Files (x86)\Windows Kits\8.0\Include\winrt\xaml\design\themeresources.xaml

This is one of those incredibly frustrating things that should be in Microsoft's documentation, but isn't (yet).
ListViewItemPlaceholderBackgroundThemeBrush is one of the System Brush Resources. It's defined by the Metro "Light" or "Dark" theme (whichever you selected for your app).
You can see the full list of system brushes in Blend. (Unfortunately, I haven't found any way to enumerate them in code. There doesn't seem to be any programmatic way to inspect the theme resources.)
Here are some steps that will get you to the full list. (Of course, you can abbreviate the steps if you're already familiar with Blend.)
Open Expression Blend.
Create a new project, and select XAML (Windows Metro style) > Blank App (XAML) and click OK.
Click in the design surface to select the Grid. (In the "Objects and timeline" docked window in the lower-left, the "[Grid]" line will become highlighted.)
In the Properties docked window in the upper right, find the "Brush" category.
Right below where it says "Background: No brush", there's a row of five buttons. Click the rightmost button ("Brush resources").
The list of system brush resources will appear in the listbox.