I need to float out some content out of the ListBox
as specified in a DataTemplate
for an ListBox.ItemTemplate
. I am using RenderTransform
but the content gets clipped on ListBox
boundaries. ClipToBounds
is False
for the entire visual tree.
I have read somewhere that WPF internally performs some clipping even when none is specified with dedicated clipping properties. I have a开发者_如何学运维lso found out that using Canvas
can sometimes cure the clipping problem but it does not help here.
How can I overcome this problem? Here is some XAML that I want to fix. Please note the entire left part of rectangle is missing.
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<Rectangle Fill="Red" Stroke="Green" StrokeThickness="4" Width="100" Height="50">
<Rectangle.RenderTransform>
<TranslateTransform X="-50" />
</Rectangle.RenderTransform>
</Rectangle>
</DataTemplate>
</ListBox.ItemTemplate>
42
</ListBox>
The ListBoxItem
's are getting clipped by the ScrollViewer
in the ListBox
Template. To work around this I think you'll need to remove the ScrollViewer
from the Template and if you need scrolling you can wrap the ListBox
in a ScrollViewer
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<ListBox Margin="100,10,0,0">
<ListBox.Template>
<ControlTemplate TargetType="{x:Type ListBox}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="true">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<Rectangle Fill="Red" Stroke="Green" StrokeThickness="4" Width="100" Height="50">
<Rectangle.RenderTransform>
<TranslateTransform X="-50" />
</Rectangle.RenderTransform>
</Rectangle>
</DataTemplate>
</ListBox.ItemTemplate> 42
</ListBox>
</ScrollViewer>
Update
The ScrollViewer
in the Template will generate a ScrollContentPresenter
which in turn has the following GetLayoutClip
protected override Geometry GetLayoutClip(Size layoutSlotSize)
{
return new RectangleGeometry(new Rect(base.RenderSize));
}
This class is Sealed so you can't derive from it to override this method. You would have to implement your own ScrollContentPresenter
(e.g MyScrollContentPresenter
) and probably your own ScrollViewer
that uses MyScrollContentPresenter
as well to make this work (and if you return null
in this method I think that some items below the bounds of the ListBox
could become visible as well)
I stumbled upon a solution to this problem by accident while working around it. If you change the ScrollViewer's HorizontalScrollMode and VerticalScrollMode to "Disabled" within the style template, it will stop clipping in each direction respectively.
Edit: May not work for WPF. I tested with a UWP app. The fields in question are:
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollMode="Disabled"
精彩评论