Questions on UI for WPF Forum

2 answers

230 views

Hi,

I am building a multi layered pie chart (by stacking charts).

I would like to remove the border - but I do not want to remove the border between individual pieces.

Code:

ChartView

answered on 02 Oct 2019

1 answer

113 views

After setting "AlternationCount", the drag is stopped working for alternate rows.

Hello,

In our application, when we set the "AlternationCount", the alternate rows stopped dragging. If I remove the AlternationCount then all the rows start dragging.

I have demo project showcasing the behavior, but I can not upload that here.

Kindly let me know if you able to reproduce this issue at your end ?

Thanks,

Parthiv

GridView

answered on 02 Oct 2019

1 answer

771 views

Custom row template with editable controls

Hi, my original issue is as following: I have a collection of Objects to be shown in a Grid; each Object has many individual properties that are editable by user. If I show each property as individual column (straight forward solution) then I end up with tens of columns and a very long horizontal scroll bar – very cumbersome view to inspect and work with data.

I am experimenting with custom row layout as an alternative solution. I declared a few columns (only fields I expect user to sort over) then the rest of the properties will be shown below in the custom layout. Here is a simplified example:

<telerik:RadGridView ItemsSource="{Binding Items}"

CanUserSelect="True" ShowGroupPanel="False" AutoGenerateColumns="False" CanUserFreezeColumns="False"

CanUserInsertRows="False" CanUserDeleteRows="False" RowIndicatorVisibility="Collapsed" IsFilteringAllowed="False"

SelectionMode="Extended"

RowStyle="{StaticResource MyRowStyle}">

<telerik:RadGridView.Columns>

<telerik:GridViewDataColumn Header="Name" DataMemberBinding="{Binding Name}" Width="75" IsReadOnly="True">

<telerik:GridViewDataColumn Header="Quantity" DataMemberBinding="{Binding Quantity}" Width="50">

<telerik:GridViewDataColumn Header="Price" DataMemberBinding="{Binding Price}" Width="55">

</telerik:RadGridView.Columns>

</telerik:RadGridView>

<Style x:Key="MyRowStyle" TargetType="telerik:GridViewRow">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:GridViewRow">

<Border x:Name="rowsContainer"

Background="{TemplateBinding Background}"

Padding="0,0,0,3">

<StackPanel Orientation="Vertical">

<telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" IsTabStop="False" BorderThickness="0"/>

<Grid Margin="15,3,0,0">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="8"/>

<ColumnDefinition Width="Auto" MinWidth="100"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="1"/>

<RowDefinition Height="Auto"/>

<RowDefinition Height="1"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<TextBlock Grid.Row="0" Grid.Column="0" Text="Title"/>

<TextBlock Grid.Row="2" Grid.Column="0" Text="Event Name"/>

<TextBlock Grid.Row="4" Grid.Column="0" Text="Weight"/>

<TextBox Grid.Row="0" Grid.Column="2"

Text="{Binding Title, UpdateSourceTrigger=PropertyChanged}"

MaxLength="30"/>

<TextBox Grid.Row="2" Grid.Column="2"

Text="{Binding EventName, UpdateSourceTrigger=PropertyChanged}"

MaxLength="30"/>

<TextBox Grid.Row="4" Grid.Column="2"

Text="{Binding Weight, UpdateSourceTrigger=PropertyChanged}"

MaxLength="20"/>

</Grid>

</StackPanel>

</Border>

<ControlTemplate.Triggers>

<Trigger Property="IsMouseOver" Value="True">

<Setter Property="Background" TargetName="rowsContainer" Value="{StaticResource GridRowHighlightBrush}"/>

</Trigger>

<Trigger Property="IsSelected" Value="True">

<Setter Property="Background" TargetName="rowsContainer" Value="{StaticResource SelectedItemBrush}"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

I used DataCellsPresenter to show properties defined as columns properly aligned with respective column headers. The rest of the properties are show through individual editors laid out below.

All works well except for two issues:

Scenario: User starts editing value in “Quantity” column of the grid and then clicks mouse over “Title” textbox.

Issue #1 Keyboard focus shifts over to “Title” textbox but the cell in “Quantiy” column still stays in edit more.
Issue #2 If user click over “Title” textbox in a different row then that row doesn’t become selected.

Any suggestions?

GridView

answered on 02 Oct 2019

4 answers

143 views

ControlTemplate applied to CarouselItem style

Hi Telerik,

I'mu using a RadCarousel with a style applied to all Carousel Items. Sometimes, and randomly, the picture in the Carousel Item disappears (the border or the overlay are still present).

My Carousel :

<telerik:RadCarousel Grid.Column="1" x:Name="InspectionCarousel" ItemsSource="{Binding TabDiagramsForActiveInspection}" AutoGenerateDataPresenters="False"

Background="Transparent" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" SelectedItem="{Binding SelectedItem}">

<telerik:RadCarousel.ItemsPanel>

<ItemsPanelTemplate>

<telerik:RadCarouselPanel Path="{StaticResource horizontalPath}"/>

</ItemsPanelTemplate>

</telerik:RadCarousel.ItemsPanel>

</telerik:RadCarousel>

My Carousel Item Style :

<Style TargetType="telerik:CarouselItem">

<Setter Property="HorizontalAlignment" Value="Stretch"/>

<Setter Property="VerticalAlignment" Value="Stretch"/>

<Setter Property="Height" Value=

"{Binding Path=ActualHeight, ElementName=InspectionCarousel, Converter={conv:PercentageConverter}, ConverterParameter='0,9'}"

/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerik:CarouselItem">

<Grid>

<Border BorderThickness="5" CornerRadius="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

<Image Source="{Binding TabDiagram.DiagramAsImage.SerializedImage, Converter={StaticResource ImageConverter}}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

<Grid>

<Grid.Style>

<Style TargetType="Grid">

<Setter Property="Visibility" Value="Collapsed"/>

<Style.Triggers>

<DataTrigger Binding="{Binding State}" Value="{x:Static vm:InspectionState.NA}">

<Setter Property="Visibility" Value="Visible"/>

</DataTrigger>

</Style.Triggers>

</Style>

</Grid.Style>

<Grid Background="LightGray" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.6"/>

<TextBlock Text="N/A" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="68" FontWeight="SemiBold"/>

</Grid>

<Border.Style>

<Style TargetType="Border">

<Setter Property="BorderBrush" Value="Black"/>

<Style.Triggers>

<DataTrigger Binding="{Binding State}" Value="{x:Static vm:InspectionState.ToBeDone}">

<Setter Property="BorderBrush" Value="Black"/>

</DataTrigger>

<DataTrigger Binding="{Binding State}" Value="{x:Static vm:InspectionState.OK}">

<Setter Property="BorderBrush" Value="Green"/>

</DataTrigger>

<DataTrigger Binding="{Binding State}" Value="{x:Static vm:InspectionState.KO}">

<Setter Property="BorderBrush" Value="Red"/>

</DataTrigger>

<DataTrigger Binding="{Binding State}" Value="{x:Static vm:InspectionState.NA}">

<Setter Property="BorderBrush" Value="Transparent"/>

</DataTrigger>

</Style.Triggers>

</Style>

</Border.Style>

</Border>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

Details :

- TabDiagram.DiagramAsImage.SerializedImage is an screenshot of a RadDiagram (as bytes)

- Converter={StaticResource ImageConverter} is <telerik:BinaryImageConverter x:Key="ImageConverter"/>

- when works.png is a screenshot when the style is correctly applied.

- when doesnt works.png is a screenshot of the behavior of the bug

- context.png is a global screen to show you how i'm using the RadCarousel and RadDiagram

=> Do you know why sometimes and randomly the picture disappears ?

Thank you

Carousel

answered on 02 Oct 2019

12 answers

372 views

Change and filter TrackBall tooltip information

Hi Telerik Team,

I'm currently looking into the Telerik WPF chart control (RadCartesianChart with line series).

What I'm trying to figure out is a way to change the tooltip information of a TrackBall.
Currently the ToolTip info says Value: x, Category: y like in your screenshot on this
page: https://docs.telerik.com/devtools/wpf/controls/radchartview/features/behaviors/trackball

I want to create a different design for it, reading, Date: xx.xx.xxxx, NumberOf: y and
filter all 0 values (y) out of the tooltip info. I'm using MVVM pattern with C#. I got to
the point where I can change the tooltip text (binding to TrackInfoUpdated event) but at
this point I can't get the values of the current TrackBall data series. In the VS2017 debugger
the values and categories are visible but it seems that these values are not publicly available.

Maybe you've an idea how to get the values?

Thanks in advance.

Best Regards,
Thomas

Chart

answered on 02 Oct 2019

1 answer

1.1K+ views

How to display a dotted line in a custom shape

Hello, I am using RadDiagram to draw a lot of custom shapes, someone need to display dashed lines, I draw the dotted line in Expression Design 4 and export it , but it is not displayed in RadDiagram as dashed lines, Anyone can help me, thank you

<Style TargetType="{x:Type local:RightConnectLine}">

<Setter Property="Width" Value="350" />

<Setter Property="Height" Value="50" />

<Setter Property="Margin" Value="0" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type local:RightConnectLine}">

<Grid>

<Grid.Background>

<DrawingBrush Stretch="Uniform">

<DrawingBrush.Drawing>

<DrawingGroup>

<DrawingGroup.Children>

<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 0.5,0.5L 0.5,75.5">

<GeometryDrawing.Pen>

<Pen LineJoin="Round" Brush="#FF000000"/>

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing Brush="#FF000000" Geometry=

"F1 M 1,5.83334L 1,8.5L 0,8.5L 0,5.83334L 1,5.83334 Z M 1,11.1667L 1,13.8333L 0,13.8333L 0,11.1667L 1,11.1667 Z M 1,16.5L 1,19.1667L 0,19.1667L 0,16.5L 1,16.5 Z M 1,21.8333L 1,24.5L 0,24.5L 0,21.8333L 1,21.8333 Z M 1,27.1667L 1,29.8333L 0,29.8333L 0,27.1667L 1,27.1667 Z M 1,32.5L 1,35.1667L 0,35.1667L 0,32.5L 1,32.5 Z M 1,37.8333L 1,40.5L 0,40.5L 0,37.8333L 1,37.8333 Z M 1,43.1667L 1,45.8333L 0,45.8333L 0,43.1667L 1,43.1667 Z M 1,48.5L 1,51.1667L 0,51.1667L 0,48.5L 1,48.5 Z M 1,53.8333L 1,56.5L 0,56.5L 0,53.8333L 1,53.8333 Z M 1,59.1667L 1,61.8333L 0,61.8333L 0,59.1667L 1,59.1667 Z M 1,64.5L 1,67.1667L 0,67.1667L 0,64.5L 1,64.5 Z M 1,69.8333L 1,72.5L 0,72.5L 0,69.8333L 1,69.8333 Z M 1,75.1667L 1,75.5L 0,75.5L 0,75.1667L 1,75.1667 Z M 1,0.5L 1,3.16666L 0,3.16666L 0,0.5L 1,0.5 Z "

/>

</DrawingGroup.Children>

</DrawingGroup>

</DrawingBrush.Drawing>

</DrawingBrush>

</Grid.Background>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

Diagram

answered on 02 Oct 2019

4 answers

118 views

Zoomed Chart Pans with touch even if I mark all ManipulationEvents as "Handled"

I need to be able to temporarily disable the panning and zooming of my RadCartesianChart but I cannot see how to do it.

I've got a plot of a profile that I want the user to be able to zoom horizontally and pan. I accomplish this via a ChartPanAndZoomBehavior:

<tk:RadCartesianChart.Behaviors>
<tk:ChartPanAndZoomBehavior ZoomMode="Horizontal"
PanMode="Horizontal"
DragMode="Pan"
/>

This has been working fine for a while now. I can pinch zoom as I want

But I also have some annotations on the chart that I needed to move with code-behind with Mouse and Touch Handlers, so I wrote handlers for MouseEvents (LeftButtonDown, MouseMove, LeftButtonUp) in which I handle moving my annotations. It works fine. In each handler, I mark the event as "Handled" to prevent it from bubbling up to the Chart.

This also has been working fine for a while. The user can drag the annotations and slide them across the profile and so the chart does not pan while I'm dragging my annotations, which is what I want. For example,here's the MouseMove handler.

        private void RegionHandle_OnMouseMove(object sender, MouseEventArgs args)
        {
            if (!(sender          is CartesianCustomAnnotation   ann))
return;

if (!ann.IsMouseCaptured)
return;

// (Call my annotation manipulation code here...)

args.Handled = true; // Prevent chart from handling this.

}

Unfortunately, I cannot achieve the same thing with touch handlers. I wrote event handlers for ManipulationStarting, ManipulationStarted, ManipulationDelta and ManipulationCompleted. In each one I mark the event as "Handled" but it doesn't matter. The chart still pans while I am dragging my annotations. It is very confusing.

private void RegionHandle_OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{

if (!(sender is CartesianCustomAnnotation ann))
return;

// (Call my annotation manipulation code here...)

args.Handled = true; // Prevent chart from handling this.

}

It appears there is no such thing as PreviewXXXX events for Manipulation events so I cannot use that route to intercept the touch handlers.

My next attempt at a fix came when I saw that the ChartPanAndZoomBehavior is a Dependency object and its ZoomMode, PanMode, and DragMode properties are DependencyProperties. So it should be valid to bind them to properties on my control and then just dynamically change them to ChartPanZoomMode.None and ChartDragMode.None in the handlers themselves, right? Nope. Does not work. I get a runtime exception claiming that "ChartPanZoomMode.None is not a valid value for PanMode" (which makes no sense to me).

So how can I selectively prevent the chart from panning when I want?

So how can I prevent the chart from handling touch events when I want and enable it otherwise?
-Joe

(p.s.: I cannot use your Format Code Block" functionality. The editor window always appears at top of the web page and it is obscured by the banner on the page with the "Telerik" menu, "Get a Free Trial" button, etc. I've tried this in two browsers, Edge and Chrome. I'll attach an image to this post to show what I mean..)

ChartView

answered on 01 Oct 2019

1 answer

145 views

Change the filter menu icon positions

Hi,

I am facing an issue, where in on my all grids the position is same , but just on 1 grid the position of filter menu icon is different. Wanted to know how to rectify that.

attaching the screenshot.

GridView