Rendering errors for nested objects
Posted: 26 Oct 2017, 10:53
Aiming at implementing an overlay, I am comfronted with what like a rendering problem. I counterchecked with a WPF-Implementation where there are no such flaws, suggesting that it is not an xaml/code behind problem.
The following snippets however are copied here for reference.
Short idea and problem description: Within a grid, enable an help overlay (basically a button that stretches over the complete grid). When this overlay is visible (opacity > 0 and < 1 !), sporadically there are artifacts, see image renderingProblem02.png, th darker one. In our case, this is a listbox with elements in it. The problem can be rather easily reproduced by changing the window with. The artifacts are both the line and disturbances in the listbox. The reason for those artifacts seem to be, that the listbox, when turning overlay on with the top left button. is shifted to the right one pixel. Seems to be some rounding error, I guess. This shift produces the artifacts. renderingProblem01.png shows the situation where the overlay is off, no rendering issues here.
Snippet 1 shows overlay and listbox call in xaml.
Snippet 2 is the respective part of the listbox/expander itself (please ignore the not recommended Canvas implementation for now...):
Anyone with similar experiences? As WPF does not have this issues, I consider filing a bugreport. But I wanted to post the problem beforehand.
Best regards,
Andy
The following snippets however are copied here for reference.
Short idea and problem description: Within a grid, enable an help overlay (basically a button that stretches over the complete grid). When this overlay is visible (opacity > 0 and < 1 !), sporadically there are artifacts, see image renderingProblem02.png, th darker one. In our case, this is a listbox with elements in it. The problem can be rather easily reproduced by changing the window with. The artifacts are both the line and disturbances in the listbox. The reason for those artifacts seem to be, that the listbox, when turning overlay on with the top left button. is shifted to the right one pixel. Seems to be some rounding error, I guess. This shift produces the artifacts. renderingProblem01.png shows the situation where the overlay is off, no rendering issues here.
Snippet 1 shows overlay and listbox call in xaml.
Code: Select all
<ViewExpander x:Name="viewExpander" DataContext="{Binding ViewExpanderViewModel}"
Grid.Column="2" Grid.Row="1" Grid.RowSpan="3" HorizontalAlignment="Right" Grid.ZIndex="1"/>
<Button DataContext="{Binding ViewExpanderViewModel}" Command="{Binding Path=DeactivateHelpOverlayCommand}" Grid.ZIndex="0"
Grid.RowSpan="4" Grid.ColumnSpan="3" Visibility="Hidden" Background="{StaticResource HelpOverlayBackgroundColor}">
<Button.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=HelpActive}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard FillBehavior="Stop">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.6" Duration="0:0:0.3"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding Path=HelpActive}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard FillBehavior="Stop">
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.0" Duration="0:0:0.3"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{x:Static Visibility.Hidden}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Code: Select all
<Canvas x:Name="ViewExpanderMain" Width="{StaticResource ViewExpanderHelpWidth}" Height="{StaticResource ViewExpanderHelpHeight}"
Visibility="{Binding ElementName=ViewsListBox, Path=HasItems, Converter={StaticResource BoolToVisConv}}">
<Canvas.RenderTransform>
<TranslateTransform>
<TranslateTransform.Y>-60</TranslateTransform.Y>
</TranslateTransform>
</Canvas.RenderTransform>
<Canvas x:Name="ScrollCanvas" Background="Transparent" Canvas.ZIndex="50"
Canvas.Top="90" Canvas.Right="0" Width="180" Height="530">
<Canvas.RenderTransform>
<TranslateTransform>
<TranslateTransform.X>160</TranslateTransform.X>
</TranslateTransform>
</Canvas.RenderTransform>
<Path Opacity="0.8" Fill="AntiqueWhite" StrokeThickness="0" StrokeDashCap="Round" Data="m0,0 v120 l20,30 v380 h162 v-530"/>
<ToggleButton x:Name="InfoButton" Canvas.Top="11" Canvas.Left="3" Width="16" Height="16" Background="Transparent"
IsChecked="{Binding Path=HelpActive, Mode=TwoWay}"/>
<ToggleButton x:Name="PinButton" Canvas.Top="29" Canvas.Left="3" Width="16" Height="16"/>
<StackPanel Canvas.Left="22" Canvas.Top="10" Width="160" Height="518">
<Button x:Name="PageUpButton" Height="16" Style="{StaticResource ScrollButtonStyle}" Click="PageUpButton_OnClick">
<Path Data="M0,5 l10,-3 l10,3" StrokeThickness="1" Stroke="White"/>
</Button>
<ListBox x:Name="ViewsListBox" ScrollViewer.VerticalScrollBarVisibility="Hidden" Height="486" BorderThickness="0"
ItemsSource="{Binding Path=ViewListEntries, Mode=OneWay}" Background="Gray">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="0,4,0,4"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Button Width="160" Height="90" Style="{StaticResource ViewImageButton}">
<Canvas>
<Image Source="{Binding Path=ViewTexture}" Width="160" Height="90" />
<Border Opacity="0.8" Background="Black" Canvas.Top="70" Canvas.Left="30" Width="130" Height="20" CornerRadius="10,0,0,0"/>
<TextBlock Canvas.Top="73" Canvas.Left="40" Width="110" Height="25" Foreground="White" FontSize="13" FontWeight="ExtraLight" Text="{Binding ViewName}" TextTrimming="CharacterEllipsis"/>
</Canvas>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button x:Name="PageDownButton" Height="16" Style="{StaticResource ScrollButtonStyle}" Click="PageDownButton_OnClick">
<Path Data="M0,0 l10,3 l10,-3" StrokeThickness="1" Stroke="White"/>
</Button>
</StackPanel>
</Canvas>
</Canvas>
Best regards,
Andy