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="{开发者_如何学JAVABinding 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" />
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.
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;
}
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].
精彩评论