Access ScaleTransform of Canvas which is in a ListBox from CodeBehind

Question

My Problem

I want to add a ScaleTransform to my Canvas and tried adding code for it in the code behind of my view. However while VisualStudio shows me the accessor it throws an error when I try to use it in the code behind.

My ListBox looks like this:

<Grid>
    <cc:ListBoxNoDragSelection ItemsSource="{Binding MainModel.Rectangles}" Background="{DynamicResource  BG}" SelectedItem="{Binding Selected}"
                               BorderThickness="0" x:Name="ListBoxNoDragSelection">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas x:Name="MockupCanvas" MouseWheel="MockupCanvas_OnMouseWheel" Background="Transparent">
                    <Canvas.RenderTransform>
                        <ScaleTransform x:Name="St"/>
                    </Canvas.RenderTransform>
                    <Canvas.ContextMenu>
                        <ContextMenu>
                            <MenuItem Header="New rectangle" Command="{Binding AddNewRectangleToCollectionCommand}"/>
                            <MenuItem Header="Delete selected rectangle" Command="{Binding TryDeleteRectangleFromCollectionCommand}"/>
                        </ContextMenu>
                    </Canvas.ContextMenu>
                </Canvas>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="Canvas.Left" Value="{Binding X}"/>
                <Setter Property="Canvas.Top" Value="{Binding Y}"/>
                <Setter Property="Canvas.ZIndex" Value="{Binding Z}"/>
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <DockPanel Height="Auto" Width="{Binding Width}">
                    <Label DockPanel.Dock="Top" Content="{Binding Name}" Foreground="{DynamicResource Foreground}" IsHitTestVisible="False"/>
                    <Rectangle Width="{Binding Width}" Height="{Binding Height}"  DockPanel.Dock="Bottom"
                               Fill="Transparent" Stroke="White" StrokeThickness="3" RadiusX="10" RadiusY="10" />
                </DockPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </cc:ListBoxNoDragSelection>
</Grid>

The important part is:

<Canvas x:Name="MockupCanvas" MouseWheel="MockupCanvas_OnMouseWheel" Background="Transparent">
                    <Canvas.RenderTransform>
                        <ScaleTransform x:Name="St"/>
                    </Canvas.RenderTransform>
                    <Canvas.ContextMenu>
                        <ContextMenu>
                            <MenuItem Header="New rectangle" Command="{Binding AddNewRectangleToCollectionCommand}"/>
                            <MenuItem Header="Delete selected rectangle" Command="{Binding TryDeleteRectangleFromCollectionCommand}"/>
                        </ContextMenu>
                    </Canvas.ContextMenu>
                </Canvas>

Code-Behind:

private void MockupCanvas_OnMouseWheel(object sender, MouseWheelEventArgs e)
    {

        if (e.Delta > 0)
        {
            St.ScaleX *= ScaleRate;
            St.ScaleY *= ScaleRate;
        }
        else
        {
            St.ScaleX /= ScaleRate;
            St.ScaleY /= ScaleRate;
        }
    }

Visual Studio keeps telling me that St is not in the current context available.

What am I doing wrong?

Answer 1

You could just get the ScaleTransform out of the canvas instead of accessing it by name:

private void MockupCanvas_OnMouseWheel(object sender, MouseWheelEventArgs e)
{
    var scaleTransformation = (sender as Canvas)?.RenderTransform as ScaleTransform;

    if (scaleTransformation == null)
        return;
    if (e.Delta > 0)
    {
        scaleTransformation.ScaleX *= ScaleRate;
        scaleTransformation.ScaleY *= ScaleRate;
    }
    else
    {
        scaleTransformation.ScaleX /= ScaleRate;
        scaleTransformation.ScaleY /= ScaleRate;
    }
}