Search code examples
c#wpfxamlscrollviewitemscontrol

WPF- Aligning content in an itemscontrol


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.

Not what I want

I want it to look like this, but I have no idea how to go about doing it.

What I do want

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>

Solution

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