Dynamic Clipping Width in Silverlight Within Canvas - silverlight

Question

Why does this throw an error and how can I fix... I need to set the clipping rect to be dynamic.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="42"/>
<ColumnDefinition x:Name="ListBoxContainer" Width="*"/>
<ColumnDefinition Width="42"/>
</Grid.ColumnDefinitions>
<Canvas>
<Button x:Name="btnGalleryLeft"
Click="btnGalleryLeftClick"
Style="{StaticResource GalleryNavigationLeft}"
Canvas.Left="7"
Canvas.Top="50" />
</Canvas>
<Canvas Grid.Column="1" x:Name="ListboxWrapper">
<Canvas.Clip>
<RectangleGeometry>
<RectangleGeometry.Rect>
<Rect X="0" Y="0"
Width="{Binding ElementName=ListBoxContainer, Path=Width}"
Height="{Binding ElementName=ListBoxContainer, Path=Height}"/>
</RectangleGeometry.Rect>
</RectangleGeometry>
</Canvas.Clip>
<ListBox x:Name="ListBox1"
Margin="15, 18, 15, 0"
Style="{StaticResource GalleryListBoxStyle}"
ItemsSource="{Binding DocItemCollection}"
SelectionChanged="ListBox_SelectionChanged"
MouseLeftButtonUp="ListBox_MouseLeftButtonUp"
Canvas.Top="0"
Canvas.Left="0"
/>
</Canvas>
<Canvas Grid.Column="2">
<Button x:Name="btnGalleryRight"
Click="btnGalleryRightClick"
Style="{StaticResource GalleryNavigationRight}"
Margin="0, 0, 7, 0"
Canvas.Top="50" />

Answer 1

You can still use RectangleGeometry as clipping area. Just subscribe to the Loaded event, and in that create a new RectangleGeometry
void control_Loaded(object sender, RoutedEventArgs e)
{
LayoutRoot.DataContext = this;
Rect rect = new Rect(0, 0, yourWidth, yourHeight);
RectangleGeometry reo = new RectangleGeometry();
reo.Rect = rect;
this.canvas.Clip = reo;
}
Just to add little information
In addition, opacity and clip property settings are handled by the
composition thread. However, if an Opacity mask or non-rectangular
clip is used on the animated object, these operations will be passed
to the UI Thread. This means that even if the clip region is a
rectangular shape but uses the PathGeometry the operations will be
passed to the UI thread. So make sure to always use the
RectangleGeometry for clipping paths if possible.

Answer 2

Solution finally.... after much cursin and swearing. If only everything was as stright fwd as in CSS (overflow bloody hidden property).
Front-end:
<Canvas Grid.Column="1" x:Name="ListboxWrapper" Background="Black">
<ScrollViewer Background="Red"
FlowDirection="LeftToRight"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
x:Name="ScrollViewerClipper">
<Canvas x:Name="CarouselContainer">
<gallery:ImageCarousel x:Name="carousel" />
</Canvas>
</ScrollViewer>
Back-end:
public GalleryPanel()
{
InitializeComponent();
LayoutRoot.SizeChanged +=new SizeChangedEventHandler(LayoutRoot_SizeChanged);
}
private void LayoutRoot_SizeChanged(object s, SizeChangedEventArgs e)
{
ScrollViewerClipper.Width = ListboxWrapper.ActualWidth;
ScrollViewerClipper.Height = ListboxWrapper.ActualHeight;
}

Answer 3

I think you are over complicating it. Binding to Width/Height of ColumnDefinition not going to work. I'd simply create behavior that would subscribe to SizeChanged event and set clipping based on ActualWidth[Height].