Telerik Forums
UI for WPF Forum
5 answers
207 views

Hi,

I am trying specify RadDiagram Canvas size and I have two questions below.

Question 1)

When I set Width and Height of RadDiagram to large numbers,

ViewportRect.location of RadDiagramThumbnail is different.

Is this correct behavior and why is this happening?

 

Question 2)

With With and Height set, I am able to restrict the movement(or scroll?) of canvas to (0,0) and (width,height).

Below is the code I wrote to restrict the pan movement.

Now, I want to the same thing when I click and move mouse on RadDiagramThumbnail's ViewportRect.

How can I do this?

Thanks in advance.

Jaeho

 

 

MainWindow.xaml

   <Grid x:Name="LyoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <telerik:RadDiagram x:Name="xDiagram" 
            Width="5760"
            Height="3240"
            MouseMove="diagram_MouseMove"
            PreviewMouseDown="diagram_MouseDown"
            PreviewMouseUp="diagram_MouseUp"
            PreviewPan="Diagram_OnPreviewPan"
                            >
            <telerik:RadDiagramShape x:Name="Shape1" 
                                 Content="Shape1" 
                                 Geometry="{telerik:FlowChartShape ShapeType=Database1Shape}" 
                                 Position="100,80" />
            <telerik:RadDiagramShape x:Name="Shape2" 
                                 Content="Shape2" 
                                 Position="200,180" />
            <telerik:RadDiagramConnection Source="{Binding ElementName=Shape1}" Target="{Binding ElementName=Shape2}" />
        </telerik:RadDiagram>
        <telerik:RadDiagramThumbnail x:Name="xThumbnail" 
                             Grid.Row="1" 
                             Diagram="{Binding ElementName=xDiagram}">
            <telerik:RadDiagramThumbnail.ViewportStyle>
                <Style TargetType="Rectangle">
                    <Setter Property="Stroke" Value="Blue" />
                </Style>
            </telerik:RadDiagramThumbnail.ViewportStyle>
        </telerik:RadDiagramThumbnail>
    </Grid>''

 

 

MainWindow.xaml.cs

        private bool isPanning = false;
        private Point oldPosition;

        private void Diagram_OnPreviewPan(object sender, PositionChangedRoutedEventArgs e)
        {
            e.Handled = true;
            this.isPanning = true;

        }

        private void diagram_MouseDown(object sender, MouseButtonEventArgs e)
        {
            this.oldPosition = e.GetPosition(this);
        }

        private void diagram_MouseUp(object sender, MouseEventArgs e)
        {
            this.isPanning = false;
        }

        private void diagram_MouseMove(object sender, MouseEventArgs e)
        {
            if ((e.LeftButton == MouseButtonState.Pressed) || (e.RightButton == MouseButtonState.Pressed))
            {
                var position = e.GetPosition(this);

                if (this.isPanning && (e.RightButton == MouseButtonState.Pressed || Keyboard.IsKeyDown(Key.LeftCtrl) || Keyboard.IsKeyDown(Key.RightCtrl)))
                {
                    RadDiagram diagram = sender as RadDiagram;
                    double xOffset = position.X - oldPosition.X;
                    double yOffset = position.Y - oldPosition.Y;
                    if (yOffset < 0)
                    {
                        int visibleHeight = (int)(diagram.DesiredSize.Height / diagram.Zoom);
                        double pos = diagram.Viewport.Top + visibleHeight;
                        if (pos - yOffset > diagram.ActualHeight)
                        {
                            yOffset += (int)((pos - yOffset) - diagram.ActualHeight);
                        }
                    }
                    else if (yOffset > 0)
                    {
                        if (diagram.Viewport.Top - yOffset < 0)
                        {
                            //e.Handled = true;
                            yOffset += (int)diagram.Viewport.Top - yOffset;
                        }
                    }

                    if (xOffset < 0)
                    {
                        int visibleWidth = (int)(diagram.DesiredSize.Width / diagram.Zoom);
                        double pos = diagram.Viewport.Left + visibleWidth;
                        if (pos - xOffset > diagram.ActualWidth)
                        {
                            //e.Handled = true;
                            xOffset += (int)((pos - xOffset) - diagram.ActualWidth);
                        }
                    }
                    else if (xOffset > 0)
                    {

                        if (diagram.Viewport.Left - xOffset < 0)
                        {
                            //e.Handled = true;
                            xOffset += (int)diagram.Viewport.Left - xOffset;
                        }
                    }

                    if (Math.Abs(xOffset) != 0 || Math.Abs(yOffset) != 0)
                    {
                        diagram.Position = new Point(diagram.Position.X + xOffset, diagram.Position.Y + yOffset);
                    }

                    oldPosition = new Point(oldPosition.X + xOffset, oldPosition.Y + yOffset);
                }
            }
        }

 

Vladimir Stoyanov
Telerik team
 answered on 13 Apr 2020
0 answers
156 views

I made a class inherited raddiagramshape class and add "Forename" and "ForenameHorizontalAlignment" to this.

I changed template of SettingsPaneView and I added Horizontal alignment for shape, you can see this in image below.

My template add is 

<ListBox Grid.Column="0"
         ScrollViewer.HorizontalScrollBarVisibility="Disabled"
         ScrollViewer.VerticalScrollBarVisibility="Disabled"
         HorizontalAlignment="Left"
         extensions:SettingsPaneView.EditorPropertyName="ForenameHorizontalAlignment"
         extensions:SettingsPaneView.EditorItemType="Shapes, Connections"
         extensions:SettingsPaneView.EditorValue="{Binding Path=SelectedIndex, RelativeSource={RelativeSource Self}, Mode=TwoWay, Converter={StaticResource HorizontalAlignmentConverter}}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel IsItemsHost="True" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBoxItem>
        <!--Left Alignment-->
        <Path Width="26" Height="26" Stretch="Fill" Data="M 0,4L 24,4 M 0,10L 12,10 M 0,16L 24,16 M 0,22L 12,22 M 0,28L 24,28 M 0,0L 32,0L 32,32L 0,32L 0,0 Z" Stroke="Black" StrokeThickness="1.5"/>
    </ListBoxItem>
    <ListBoxItem>
        <!--Center Alignment-->
        <Path Width="26" Height="26" Stretch="Fill" Data="M 4,4L 28,4 M 10,10L 22,10 M 4,16L 28,16 M 10,22L 22,22 M 4,28L 28,28 M 0,0L 32,0L 32,32L 0,32L 0,0 Z" Stroke="Black" StrokeThickness="1.5"/>
    </ListBoxItem>
    <ListBoxItem>
        <!--Right Alignment-->
        <Path Width="26" Height="26" Stretch="Fill" Data="M 8,4L 32,4 M 19,10L 32,10 M 8,16L 32,16 M 19,22L 32,22 M 8,28L 32,28 M 0,0L 32,0L 32,32L 0,32L 0,0 Z" Stroke="Black" StrokeThickness="1.5"/>
    </ListBoxItem>
</ListBox>

 

and HorizontalAlignmentConverter is

[ValueConversion(typeof(System.Windows.HorizontalAlignment), typeof(int))]
public class HorizontalAlignmentConverter : IValueConverter
{
    #region IValueConverter Members
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value != null)
        {
            switch ((int)value)
            {
                case 0: return System.Windows.HorizontalAlignment.Left;
                case 2: return System.Windows.HorizontalAlignment.Right;
                default: return System.Windows.HorizontalAlignment.Center;
            }
        }
        return System.Windows.HorizontalAlignment.Center;
    }
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value == null) return 1;
        System.Windows.HorizontalAlignment _value = (System.Windows.HorizontalAlignment)value;
        switch (_value)
        {
            case System.Windows.HorizontalAlignment.Left: return 0;
            case System.Windows.HorizontalAlignment.Right: return 2;
            default: return 1;
        }
    }
    #endregion
}

 

when I add a shape into diagram and open settingpane I can change horizontal alignment of forename(for example change to left) but when again open sttingpane it show me center. I checked it and I see always Convertback value is null.?

how can I fix it?

 

Davoud
Top achievements
Rank 1
 asked on 12 Apr 2020
3 answers
146 views

I've got a simple RadCartesianChart with two Linear Axes and a scatter line plot.   It represents a profile Each axis represents Millimeters.  IThat chart auto fits the data to the screen space.   I've attached an image to show what it looks like

But now I need to implement a checkbox that will switch the axes to what I am calling "Equal Scale" mode:  So that 1 millimeter of my data in vertical space will take up the same physical screen space as 1 millimeter in horizontal space.  

Is there a simple way to do this?  Some property that I am missing, perhaps?  I realize I can try to write the code-behind. but it seems awfully complicated -- I have to take into account the relative ActualWidth/ActualHeight properties of the control as as the relative Millimeter height and width of the data.   And I have to make sure that I don't lose my nice even auto labels (or I have do do all the match to individually calculate them myself)

So is there a property/function that will let me achieve this already built in to ChartView?

 

-Joe

Joe
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 10 Apr 2020
3 answers
544 views

My issue might be similar to this one: https://www.telerik.com/forums/async-await-inside-row-validating-event

I'm wanting to validate by cell, as opposed to by row. Similar to the above, validation works fine when no async calls are made, but progresses as if the validation wasn't there as soon as there is an async call of any sort.

In my case, I'm wanting to use the Cell Validating event not strictly for validation, but rather to provide a prompt to the user and have them answer yes or no before progressing. But I need to be able to run the event with async/await as I am calling async methods.

I can slightly get around this by calling the async methods with in a synchronous-like way, by calling the Wait() method on a Task, for instance. But it is much less convenient to do so.

Is the Telerik UI for WPF library still unable to cope with async validating events like described in the above thread or is there a way to make this situation work?

// This would be preferred
public async void CellValidating(GridViewCellValidatingEventArgs e)
{
    var result = await this.Dispatcher.InvokeAsync(() => MessageBox.Show("Test", "Test", MessageBoxButton.YesNo, MessageBoxImage.Warning, MessageBoxResult.Yes));
    if (result == MessageBoxResult.No)
    {
        e.IsValid = false;
        e.ErrorMessage = "This is an error";
    }
}
 
// This is what I have to do instead
public void CellValidating(GridViewCellValidatingEventArgs e)
{
    var op = this.Dispatcher.InvokeAsync(() => MessageBox.Show("Test", "Test", MessageBoxButton.YesNo, MessageBoxImage.Warning, MessageBoxResult.Yes));
    _ = op.Wait();
    var result = op.Result;
    if (result == MessageBoxResult.No)
    {
        e.IsValid = false;
        e.ErrorMessage = "This is an error";
    }
}
Martin Ivanov
Telerik team
 answered on 10 Apr 2020
1 answer
102 views

Hi,

I have built the linked project, but my custom command provider is not being called when I click Finish.  Please help.

Here is the link: https://drive.google.com/open?id=1HcYu05M7GAPJOJQqfL_l7FYtEMNwhu8i

Thanks,

Thomas

Martin Ivanov
Telerik team
 answered on 10 Apr 2020
1 answer
153 views

   Hello,

I have project where I need to create a table with 2 Rows

The first row has to be filled with Comboboxes with Options to choose , the second Row I get from a Database.

The ammount of Columns will change every time so i have to do it dynamically

What would be my best approach? i attached a screenshot thats shows what I want


Martin Ivanov
Telerik team
 answered on 09 Apr 2020
6 answers
107 views

Hi,

I'm having trouble getting list item ("li") element properties ignored using the HtmlFormatProvider export settings.  In the following example "h1" properties are ignored correctly, but the "li" ones still come through in the output.

settings.PropertiesToIgnore["h1"].AddRange(new List<string>()
{
    "margin-top", "margin-bottom"
});
settings.PropertiesToIgnore["li"].AddRange(new List<string>()
{
    "margin-right", "font-family", "font-size", "color"
});

I notice, looking at HtmlDocumentExporter.ExportBlockContainer, that the call to HtmlHelper.IsPropertyForbiddenForExport passes in "value" as the propertykey rather than a css property name (see below).  Is that correct or am I doing something wrong here?

this.writer.StartTag("li");
if (!HtmlHelper.IsPropertyForbiddenForExport(this.Settings, "li", "value"))
{
    HtmlWriter htmlWriter = this.writer;
    int listItemIndex = this.GetDocumentListForParagraph(paragraph).GetListItemIndex(paragraph);
    htmlWriter.AddAttribute("value", listItemIndex.ToString());

}

Many thanks

John

 

John
Top achievements
Rank 1
 answered on 09 Apr 2020
3 answers
1.0K+ views

I've long been showing a ScatterLineSeries on my RadCartesianChart that uses a MultiBinding in the ItemsSource.  I needed this multibinding because the underlying points are expressed in millimeters but the display can be in any units the user chooses and which the user can change. So I have to convert on the fly.  So I wrote a converter that takes 5 elements 

  1. An array of points to be converted
  2. The source X unit
  3. The source Y unit
  4. The destination X unit
  5. The destination Y unit.

It then returns an array of points converted to the appropriate units.  This works fine.  It looks like this:

 

 

<tk:RadCartesianChart.Series>
    <tk:ScatterLineSeries XValueBinding="X" YValueBinding="Y">
        <tk:ScatterLineSeries.ItemsSource>
            <MultiBinding Converter="{core:PointsLengthConverter}">
                <Binding Path="ProfilePoints" />
                <Binding Path="SystemService.Millimeter" />          <!-- Source X Unit  -->
                <Binding Path="SystemService.Millimeter" />          <!-- Source Y Unit  -->
                <Binding ElementName="Root" Path="LengthAxisUnit" /> <!-- Dest X Unit  -->
                <Binding ElementName="Root" Path="HeightAxisUnit" /> <!-- Dest Y Unit  -->
            </MultiBinding>
        </tk:ScatterLineSeries.ItemsSource>
    </tk:ScatterLineSeries>
</tk:RadCartesianChart.Series>


However now I need to show several plots on this graph, not just one.  But the number varies.  So I need to use a ChartSeriesProvider.  So I did, with a ScatterSeriesDescriptor.  At first it seemed to work -- I got my points -- but then I realized that it iis not converting my points anymore.  It is completely ignoring my "ItemsSource" binding in favor the of the "ItemsSourcePath" property in the descriptor.   

Here's what it looks like:  First I defined a style for each ScatterLineSeries

<Style x:Key="SeriesStyle" TargetType="{x:Type tk:ScatterLineSeries}">

    <d:Style.DataContext>
        <x:Type Type="core:IProfile" />
    </d:Style.DataContext>
 
    <Setter Property="ItemsSource">
        <Setter.Value>
            <MultiBinding Converter="{core:PointsLengthConverter DebugMode=True}">
                <Binding Path="ProfilePoints" />
                <Binding Source="{x:Static sdk:LengthUnit.Millimeter}" />  <!-- Source X Unit  -->
                <Binding Source="{x:Static sdk:LengthUnit.Millimeter}" />  <!-- Source Y Unit  -->
                <Binding ElementName="Root" Path="LengthAxisUnit" />       <!--  Dest X Unit   -->
                <Binding ElementName="Root" Path="HeightAxisUnit" />       <!--  Dest Y Unit   -->
            </MultiBinding>
 
        </Setter.Value>
    </Setter>
</Style>

 

Then, inside chart, I defined the seriesprovider and descriptor and used that style in it:

<tk:RadCartesianChart.SeriesProvider>
    <tk:ChartSeriesProvider Source="{Binding Profiles}">
        <tk:ChartSeriesProvider.SeriesDescriptors>
            <tk:ScatterSeriesDescriptor XValuePath="X" YValuePath="Y"
                                        ItemsSourcePath="Points"
                                        Style="{StaticResource SeriesStyle}">
            </tk:ScatterSeriesDescriptor>
        </tk:ChartSeriesProvider.SeriesDescriptors>
    </tk:ChartSeriesProvider>
</tk:RadCartesianChart.SeriesProvider>

 

Again, this mostly works.  My points get plotted.  My "SeriesStyle" even gets applied to the ScatterLineSeries (e.g. If I set the stroke to "Yellow" in that style, I see a yellow plotline).  But the final element of that style -- ItemsSource -- does NOT get applied.  I've tried putting a breakpoint inside the converter.  It never gets invoked.  So my points all remain in millimeters.

I took a closer look at ScatterSeriesDescriptor, hoping I could find a property that would let me achieve my MultiBinding.  I see XValuePath, YValuePath and ItemsSourcePath, and a few other properties ("TypeConverter", "TypePath", etc) but I cannot see any way to apply a MultiBinding to the series of points.

Can you suggest a way I can work around this?

 

 

 

 

Joe
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 08 Apr 2020
3 answers
108 views

Hi.

I set an style with to change stroke thickness of a shape but I want something like aureole or corona(not corona virus). I attached an image to see what I want.

My style that I set Is

<Style TargetType="telerik:RadDiagramShape">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="StrokeThickness" Value="5"></Setter>
        </Trigger>
    </Style.Triggers>
</Style>

 

Davoud
Top achievements
Rank 1
 answered on 08 Apr 2020
0 answers
99 views

Hi,

Firstly I removed the delete button from Schedule view Appointments and I am trying to delete the Appointments using a button added in the UserControl to do the same.

 

From the code behind  I invoked the RecurrenceChoiceDialog as this below.

    Telerik.Windows.Controls.RadScheduleViewCommands.DeleteAppointment.Execute(ScheduleView, ScheduleView);

 

1) Actually I noticed that Whenever we selected the "DELETE THE SERIES"  -> AppointmentDeleting event of the schedule view is firing (Here I set a Boolean isSeriesSelectedForDelete as true).

2) Whenever I select "DELETE OCCURENCE" there is no event firing I noticed. But I have managed it by adding like this

            Telerik.Windows.Controls.RadScheduleViewCommands.DeleteAppointment.Execute(ScheduleView, ScheduleView);
            if (!isSeriesSelectedForDelete)
            {
                var check = vm.Appointments.First().RecurrenceRule.Exceptions.Any(x => x.ExceptionDate == vm.SelectedAppointment.Start);
                if (check)
                    vm.DeleteOccurenceOrSeries(false);
            }

 

I could have reduced a lot of codes like this. if I get a result from the dialog which includes whether the user is clicked OK or CANCEL which one is selected Series or Occurrence . I think my scenario is clear and you can help me out. 

 

Thanks.

Mohammed
Top achievements
Rank 1
 asked on 08 Apr 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?