I have an itemscontrol inside of a scroll viewer and as an element gets closer to the center of the screen, it gets larger. The problem is, while it gets larger, its top left corner is locked into place and it looks like this.
I want it to look like this, but I have no idea how to go about doing it.
Edit: Added xaml info, please ask for C# if needed (I doubt it though)
<TextBlock Name="text2" Text="hello" Margin="0,15,0,-10"/>
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" Height="300" Name="Viewr" Canvas.Top="120" ScrollChanged="Viewr_ScrollChanged">
<ItemsControl Name="viewrcontent">
<Canvas Width="100" Height="100" Background="Red"/>
<Canvas Width="100" Height="100" Background="Red"/>
<Canvas Width="100" Height="100" Background="Red"/>
<Canvas Width="100" Height="100" Background="Red"/>
<Canvas Width="100" Height="100" Background="Orange" Name="hellobox"/>
<Canvas Width="100" Height="100" Background="Green" Name="midbox"/>
<Canvas Width="100" Height="100" Background="Black"/>
<Canvas Width="100" Height="100" Background="Red"/>
<Canvas Width="100" Height="100" Background="Red"/>
<Canvas Width="100" Height="100" Background="Red"/>
<Canvas Width="100" Height="100" Background="Red"/>
<Canvas Width="100" Height="100" Background="Black"/>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="FrameworkElement.Margin" Value="5"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" CanHorizontallyScroll="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
If you apply a ScaleTransform
as a RenderTransform
to scale the items, you can set RenderTransformOrigin
to 0.5,0.5
, which will force the items to scale around their center.