Dynamic Clipping Width in Silverlight Within Canvas

Dynamic Clipping Width in Silverlight Within Canvas

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" />          

Answers & Comments...

Answer: 1

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

by : Denishttp://stackoverflow.com/users/145959

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;         } 

by : bcmhttp://stackoverflow.com/users/360890

Answer: 3

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.

by : entropyhttp://stackoverflow.com/users/1418457

---