Diagram.Background (DynamicResource) not refreshing — old color persists, GridPattern becomes thicker until scroll

GoXam
1

My diagram background is set using a DynamicResource. When the user switches themes, the DynamicResource updates correctly in WPF, but the GoXam diagram does not fully redraw/repaint.

  1. Old background color remains on parts of the canvas until the user scrolls or zooms.
  2. My GridPattern lines temporarily become thicker after the theme change.
    Attaching a video link. Recordings

Is there some refresh which I should do in LayoutCompleted events? Also as you see in the video , for the black color background the grid pattern lines which don’t correct on scrolling.

2

How do you implement your light/dark theming?

I implemented a simple SolidColorBrush resource:

    <SolidColorBrush x:Key="BackBrush" Color="WhiteSmoke" />

I used that brush as a DynamicResource for a Grid that holds my Diagram:

<Grid Background="{DynamicResource BackBrush}">
  . . .
</Grid>

Then I implemented a Button that does:

    private void Button_Click(object sender, RoutedEventArgs e) {
      var br = FindResource("BackBrush") as SolidColorBrush;
      if (br == null) return;
      if (br.Color == Colors.AntiqueWhite) {
        br.Color = Colors.LightCoral;
      } else {
        br.Color = Colors.AntiqueWhite;
      }
    }

That worked well – the effects are immediate and extend through the whole area of the diagram’s background GridPattern.

3

The problem is still persisting and even with the code you specified, same problem persists, I suspect some sort of caching is happening but we don’t do that in our app. Sure its working fine in an independent app when i try.

4

The problem is reproducible in a standalone app the moment we set gridVisible = true and apply a grid pattern, it works fine when no grid pattern is visible. Attaching a sample here Goxam issues

You have to scroll for the theme change to reflect, plz trying using the theme change button in the app

5

I had originally used the “BackBrush” as the Background for an element that contained the Diagram. When I change your sample (thanks for providing that!) in a similar manner, it works when the GridPattern is visible.

Perhaps you could set that Background via the ControlTemplate (holding the required DiagramPanel) of the Diagram. This is how it’s defined by default:

  <ControlTemplate x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type go:Diagram}, ResourceId=DefaultDiagramTemplate}" TargetType="go:Diagram">
    <Border x:Name="Border"
            Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}">
      <ScrollViewer HorizontalScrollBarVisibility="Auto"
                    VerticalScrollBarVisibility="Auto"
                    CanContentScroll="True">
        <go:DiagramPanel x:Name="Panel"
                         Stretch="{TemplateBinding Stretch}"
                         Padding="{TemplateBinding Padding}"
                         HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                         VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
      </ScrollViewer>
    </Border>
  </ControlTemplate>

Perhaps TemplateBindings aren’t dynamic? Sorry, I don’t remember.

6

I have a grid pattern which uses dynamic resource for the stroke. I tried using the background property on the parent grid which holds the diagram in the sample app, and it worked fine like you said, but in my actual application that rendered the default pattern on theme switch until I scrolled. So I moved on to using the Control template what you shared, but how do I use the dynamic resource now? I tried using it the default template on the background property it didnt work . How do i use the control template to use my dynamic resource effectively?

7

Are you saying that you declared a custom ControlTemplate for your Diagram, and replaced the Background’s TemplateBinding with a dynamic resource binding, and that didn’t update properly?

8

Yes, I just declared the same template what you shared in a resources file and replaced Background with Background=“{DynamicResource my_resource}” and this did not update the ui correctly. Sorry I am not very well versed in this area of wpf.

9

I just tried that in my sample, and this worked:

      <go:Diagram.Template>
        <ControlTemplate>
          <Border x:Name="Border"
              Background="{DynamicResource BackBrush}"
              BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}">
            <ScrollViewer HorizontalScrollBarVisibility="Auto"
                      VerticalScrollBarVisibility="Auto"
                      CanContentScroll="True">
              <go:DiagramPanel x:Name="Panel"
                           Padding="{TemplateBinding Padding}"
                           HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
            </ScrollViewer>
          </Border>
        </ControlTemplate>
      </go:Diagram.Template>

However, when I clicked the button to execute the Brush changing code, I got an exception, saying that the Brush was not modifiable. I think this makes sense. But that leads to my original question of how you are actually implementing the theming.