RenderTargetBitmap stretching UI, Slide Transition

See more:

WPF

animation

Hi all,

So I've been implementing a transition effect from the FluidKit.dll into my application. I've got two user controls that I'm transitioning between. Both controls have an auto Height value. Each time I switch the views then one user control slides in whilst the other slides out. But it seems to stretch or squash the one that is being transitioned away from. I'll include a user control below, along with the RenderTargetBitmap code:

<UserControl x:Class="AppStore_2.View.CategoryListViewer"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             Background="White">
    <ListBox Width="Auto" Height="Auto" Name="lbCategories" BorderThickness="0" 
             ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
             ScrollViewer.VerticalScrollBarVisibility="Hidden"
             HorizontalContentAlignment="Stretch"
             Background="#FFCEC9C9" Margin="5" VerticalAlignment="Top" ItemContainerStyle="{StaticResource WhiteSelectItemContainer}" HorizontalAlignment="Stretch">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel IsItemsHost="True" ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollBarVisibility="Hidden" HorizontalAlignment="Stretch"
                            Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=ActualWidth}">
                </StackPanel>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>
</UserControl>

The other user control contains a grid rather than a Listbox and I fear the transition is somehow resizing the rectangle dependant on content.

This is the code behind in the main window:

public RenderTargetBitmap RenderBitmap(FrameworkElement element)
{
    double topLeft = 0;
    double topRight = 0;

    int width = (int)element.ActualWidth;
    int height = (int)element.ActualHeight;
    double dpiX = 96;
    double dpiY = 96;

    PixelFormat pixelFormat = PixelFormats.Default;
    VisualBrush elementBrush = new VisualBrush(element);
    DrawingVisual visual = new DrawingVisual();
    DrawingContext dc = visual.RenderOpen();

    dc.DrawRectangle(elementBrush, null, new Rect(topLeft, topRight, width, height));
    dc.Close();

    RenderTargetBitmap bitmap = new RenderTargetBitmap(width, height, dpiX, dpiY, pixelFormat);

    bitmap.Render(visual);
    return bitmap;
}

private void viewList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    XmlElement root = (XmlElement)viewer.DataContext;
    XmlNodeList xnl = root.SelectNodes("Page");

    if (viewer.ActualHeight > 0 && viewer.ActualWidth > 0)
    {
        RenderTargetBitmap rtb = RenderBitmap(viewer);
        rectanglevisual.Fill = new ImageBrush(BitmapFrame.Create(rtb));
    }

    viewer.ItemsSource = xnl;

    if (oldSelectedIndex < viewList.SelectedIndex)
    {
        viewer.BeginStoryboard((Storyboard)this.Resources["slideLeftToRight"]);
    }
    else
    {
        viewer.BeginStoryboard((Storyboard)this.Resources["slideRightToLeft"]);
    }

    oldSelectedIndex = viewList.SelectedIndex;
}

So the user controls I switch between get put into my "mainGrid" control on the main window. It's almost as though the usercontrol above completely fills mainGrid, whereas the other doesn't fill it, then the transition stretches or squashes the RendderTargetBitmap to match the view sliding in.

I'm hoping someone will have experienced this and be able to tell me what I'm doing wrong.

Thanks for your time again people,

Jib.