CODEWITHSUNDEEP
c#wpfxamlscrollviewitemscontrol
Nivert9
Nivert9

Reputation: 37

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>

Upvotes: 0

Views: 557

Answers (2)

Mike Strobel
Mike Strobel

Reputation: 25623

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.

Upvotes: 1

bernd_rausch
bernd_rausch

Reputation: 335

I think you can edit the margin in the code-behind to get the desired behaviour. Something like this could work:

midbox.Width += 10;
midbox.Height += 10;
midbox.Margin = new Thickness(midbox.Margin.Left - 5, midbox.Margin.Top, midbox.Margin.Right - 5, midbox.Margin.Bottom);

Upvotes: 0

Related Questions