Pixelated view not working

[Jesper]

I am currently using RAD shapes and Text on Rad Diagram Canvas in WPF

I would like to know I can get pixel view for two color Displays, like attached Image [296x128.PNG].

Currently I can see different effects are supported, can you please let me know how can I modify rad diagram canvas  to display two color (Black and White) mode, and also I need to then export it to monochrome bitmap.

Thanks.

 

[Martin Ivanov]

Hello Jesper,

Can you please provide a bit more information on your requirement? What do you mean by pixel view?

In order to display only black and white colors in the diagram you will need to custom the shapes. For example, you can change the Geometry of the RadDiagramShape and its fill, and border.

Also, note that the diagram uses the WPF UIElements which means it uses the WPF rendering engine to draw its shapes. The WPF framework has anti-aliasing enabled by default. However, you can disable this. Read more about this in stackoverflow.

Regards,
Martin Ivanov
Progress Telerik

[Jesper]

Hi Martin,
Basically we need to implement custom grid size on our shapes view.

Pixel view means we need to have a grid that is showing rad shapes, but in pixelated version (As shown in video below)
Yes Anti aliasing link you provided we have already tried on Basic WPF shapes, but need it to do using Rad Shapes and Rad diagram.

We are already using different Telerik shapes on Rad Diagram, but these are zoomed and scaled to default view.

For elaboration I am pasting link for a sample what we want to show on our Rad Diagram and shapes.
This canvas is 296x128 pixels wide and giving us required view (You can see it here)

https://www.screencast.com/t/cThTNribt8

We need same function using existing Rad Diagram Canvas.
I can see there are properties which can change shapes behavior like Glow, Dark, Zoom, but Pixel view properties are not supported.

Please let me know if I need to provide more information on this.

Thanks.

[Martin Ivanov]

Hello Jesper,

I still don't understand exactly what is pixelated view. Does this means that the anti-aliasing should be disabled? Or you want to implement also something else? Can you please provide some drawings of the current result and the expected one? This will give me better idea on your requirement and I can think if there is a solution that I can suggest you. 

In the meantime, I've prepared a small example showing how to disable the anti-aliasing on RadDiagram shapes and connections.

Regards,
Martin Ivanov
Progress Telerik

[Jesper]

Hi Martin,

I am using RadDiagram and I would like to receive diagram event when there is any change reflected to shapes on rad diagram.

Main problem is that I am also calling UpdateLayout in code below I can see my things in diagram collection but not reflected to generated image.

Please see in code below [keyboard] = Rad Diagram and when I am generating bitmap, things on rad diagram are not rendered on image, so can you tell me event/service on rad diagram which I can subscribe/override and get notified when changes are done to rad diagram visually (There I will be generating my bitmap again then)

            keyboard.Measure(new Size(keyboard.ActualWidth, keyboard.ActualHeight));
            keyboard.Arrange(new Rect(new Size(keyboard.ActualWidth, keyboard.ActualHeight)));
            keyboard.UpdateLayout();

            // create a BitmapSource from the visual
            var targetBitmap = new RenderTargetBitmap(
                                        (int)keyboard.ActualWidth,
                                        (int)keyboard.ActualHeight,
                                        96,
                                        96,
                                        PixelFormats.Default);
            targetBitmap.Render(keyboard);

----------------------------------------------------------------------------------

 

Thanks.

Please let me know in case of any ambiguity.

Waiting for response.

[Martin Ivanov]

Hello Jesper,

In general the WPF framework doesn't provide a good mechanism for indicating when something is rendered, therefore the diagram doesn't provide such event. However, there are multiple events of the diagram and its services that might be useful in your case. You can check the events articles. For example, you can try the ItemsChanged and the CommandExecuted events. If the events doesn't work you can try an approach with a timer. For example, you can define a DispatcherTimer and on each few seconds create a picture of the diagram.

Regards,
Martin Ivanov
Progress Telerik

[Jesper]

Hi Martin,
You are right that Rad Diagram did not provide any specific object for this.

But my problem is that this is not even happening when we are manually calling

Diagram.UpdateLayout()

 

Can you please revisit my above comment for this and let me know why this is not happening?

Thanks.

[Jesper]

Hi Martin,
Can you please prioritize response on above?

Thanks.

[Martin Ivanov]

Hello Jesper,

The UpdateLayout() method comes from the WPF UIElement class which are inherited by the visual elements in the framework. The method only schedules the UIElement for measure and arrange which will happen on the next rendering pass, and only if the element's layout (size and position) is changed. The method won't ensure that all property changes or any other non-layout changes are applied. Also, because this only schedules the UI for updates it is highly possible that the control will get actually updated with a small delay.

The WPF framework provides a LayoutUpdated event which on theory you can use, but this is not very reliable. This is because the event is not fired per element (regardless you attach it to a specific object), but instead it is fired globally on each change of the layout, which means that it fires often. Additionally, the event doesn't provide information about what is updated and the sender of the handler is null.

What I could suggest you is to delay the call of the code that creates the bitmap after you call the UpdateLayout() method. To do this you can use the Dispatcher.BeginInvoke() method. Also, make sure that the size given to the Measure() and Arrange() methods are different than the current size of the element. To do this you can first measure the element with Size.Empty and then call the Measure() with its original size. If this doesn't work I would ask you to isolate the issue in a new project and send it over, along with pictures of the expected and the current result. Note that the forums doesn't allow attaching .zip files, so I would recommend you to open a new support ticket from your telerik.com account. 

As a side note, if you need faster resolution time I would strongly recommend you to contact the support team via your telerik.com account by opening a new support ticket. This way you will receive a reply within the 24h response timeframe. On the other hand there is no guarantee that a forum will be answered by the Telerik staff.

Regards,
Martin Ivanov
Progress Telerik

[Jesper]

Hi Marin,

Now I have made a video how I am calling UpdateLayout on Diagram (Keyboard in video).

https://www.screencast.com/t/jrK89mJmCv

You can see changes are reflected until ItemLevel and I am not able to get any event even tried in LayoutUpdated event that could give me hook for redrawing my image.

 

Can you please send me a sample using Dispatch (As I am not sure I got your idea for dispatching), all  you need to simulate is that diagram items are updated outside and we get an event where I can be sure that now changes relevant to items are reflected on diagram.. All this is because UpdateLayout not working according to your documentation.

[Martin Ivanov]

Hi Jesper,

As I understand from the attached video the issue is that the number in the shape is not updated. This probably is not related with the call of the UpdateLayout(). What I could suggest you is to try binding the text in the shape to the text in the TextBox using a binding Mode=TwoWay. Also, you can implement the INotifyPropertyChanged in the model that holds the text property and raise the PropertyChanged event in the property setter. See how to implement the interface in MSDN. Also, try with different UpdateSourceTrigger (a property of the Binding object).

At this point I won't be able to send you a project, because I am not familiar with your set up and I am not sure how exactly the issue reproduces, so I can't tell where and how exactly the dispatcher should be used. If the above information doesn't help I would recommend you to open a new support ticket from your telerik.com account. This way you can attach a runnable project showing the issue.

Regards,
Martin Ivanov
Progress Telerik