Questions on UI for WPF Forum

6 answers

597 views

Scroll is jumping when collapse/expand items in tree

Hello everyone,

We are having issues with vertical scroll when collapse/expand items in the TreeListView. Scroll starts to jump if we change style for GridViewCell:

<Style x:Key="CellStyle" TargetType="telerik:GridViewCell">

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

</Style>

XAML for TreeListView:

<telerik:RadTreeListView x:Name="radTreeListView2"

AutoGenerateColumns="False"

Height="450"

Width="400"

BorderBrush="Black"

BorderThickness="5"

AutoExpandItems="True"

ScrollViewer.HorizontalScrollBarVisibility="Visible"

ScrollViewer.VerticalScrollBarVisibility="Visible">

<telerik:RadTreeListView.ChildTableDefinitions>

<telerik:TreeListViewTableDefinition ItemsSource="{Binding Items}" />

</telerik:RadTreeListView.ChildTableDefinitions>

<telerik:RadTreeListView.Columns>

<telerik:GridViewDataColumn Header="Name" DataMemberBinding="{Binding Name}"/>

<telerik:GridViewDataColumn Header="Count" DataMemberBinding="{Binding Count}"/>

</telerik:RadTreeListView.Columns>

</telerik:RadTreeListView>

Steps to reproduce:
1. TreeListView should contain enough items, so scroll showed up
2. Scroll down to the middle or to the end
3.Collapse/Expand any item
AR: Scroll jumps to top (or to the middle)
ER: Scroll stays on the same place, so we can see collapsed/expanded item

Scroll is jumping even if we just put some content in CellTemplate:

<telerik:RadTreeListView.Columns>

<telerik:GridViewDataColumn Header="Name" DataMemberBinding="{Binding Name}"/>

<telerik:GridViewDataColumn Header="Count" DataMemberBinding="{Binding Count}">

<telerik:GridViewDataColumn.CellTemplate>

<DataTemplate>

<Border Height="50" Width="200" Background="LightGreen"/>

</DataTemplate>

</telerik:GridViewDataColumn.CellTemplate>

</telerik:GridViewDataColumn>

</telerik:RadTreeListView.Columns>

Please advice.

TreeListView

answered on 27 Aug 2019

6 answers

692 views

Is it possible to have a WPF graph with both line series and point series?

I need to create a graph that has multiple line series defined by pairs of x-y coordinates ( one start point and one end point). On the same graph I need to have several scatter points with no connecting lines. Also if there's a way to specify a straight line between some of the points and a curved line between others that'd be great. I'm currently researching WPF graphs so I don't have any code to show yet.

General Discussions

answered on 26 Aug 2019

3 answers

117 views

Programmatic Sorting

Hi,

I can successfully provide an initial sort order for my VirtualGrid using this code in the code behind file, as prescribed by your documentation:

var sortDescriptor = this.VirtualGrid.GetSortDescriptorForColumn(0);
sortDescriptor.SortDirection = System.ComponentModel.ListSortDirection.Ascending;

sortDescriptor.IsActive = true;

However, for reasons beyond the scope of this issue, my source data (an observable collection) and my custom data provider are created in my view model. My custom data provider is bound to the VirtualGrid via XAML.

Therefore, any attempt to apply your sorting code in the constructor of the code behind file fails because both the DataContext and DataProvider properties are not yet assigned in that instant (they are null), i.e. they are not populated until the View Model constructor files.

I can achieve what I want by placing the aforementioned code in the VirtualGrid's Loaded event in the code-behind file, but as a Newbie, I am concerned whether this is the correct solution.

Wayne

VirtualGrid

answered on 26 Aug 2019

3 answers

202 views

Dynamic series distortion problems

I am painting a series series line dynamically, all those link to its context viewmodel, now the problem is that when drawing more than one series they begin to distort, now as you can see in the image, when hidden by in the middle of a CheckBox of his legend the others and I just leave one this goes well, the first hurts the second, and the second to the third, and so on, already e checking the values, and those are correct, I think I have problems with the horizontal axis, but I don't know how to solve it. It can be seen in the image of how it looks. Here I leave the same as the xaml where I work. Can someone help me what is happening

<telerik:RadCartesianChart Grid.Column="1" Margin="5" x:Name="rccgrafica" FontSize="10"><br>

<telerik:RadCartesianChart.Grid><br>

<telerik:CartesianChartGrid MajorLinesVisibility="XY" MajorXLineDashArray="5, 5" MajorYLineDashArray="5, 5"><br>

<telerik:CartesianChartGrid.MajorYLineStyle><br>

<Style TargetType="{x:Type Line}"><br>

<Setter Property="Stroke" Value="Gray"/><br>

</Style><br>

</telerik:CartesianChartGrid.MajorYLineStyle><br>

<telerik:CartesianChartGrid.MajorXLineStyle><br>

<Style TargetType="{x:Type Line}"><br>

<Setter Property="Stroke" Value="Gray"/><br>

</Style><br>

</telerik:CartesianChartGrid.MajorXLineStyle><br>

</telerik:CartesianChartGrid><br>

</telerik:RadCartesianChart.Grid><br>

<telerik:RadCartesianChart.HorizontalAxis><br>

<telerik:CategoricalAxis Title="QGAS de BN [Mscf/D]"/><br>

</telerik:RadCartesianChart.HorizontalAxis><br>

<telerik:RadCartesianChart.VerticalAxis><br>

<telerik:LinearAxis Title="QLiquido [STB/D]"/><br>

</telerik:RadCartesianChart.VerticalAxis><br>

<telerik:RadCartesianChart.Behaviors><br>

<telerik:ChartPanAndZoomBehavior ZoomMode="Both" /><br>

<telerik:ChartCrosshairBehavior /><br>

</telerik:RadCartesianChart.Behaviors><br>

<telerik:RadCartesianChart.SeriesProvider><br>

<telerik:ChartSeriesProvider Source="{Binding ListaPozoCabecera, Mode=TwoWay}"><br>

<telerik:CategoricalSeriesDescriptor ItemsSourcePath="CondicionesOperacion.DatosInyeccion" CategoryPath="qGasBN" ValuePath="qLiq"><br>

<telerik:CategoricalSeriesDescriptor.Style><br>

<Style TargetType="{x:Type telerik:LineSeries}"><br>

<Setter Property="StrokeThickness" Value="{Binding SizeL}" /><br>

<Setter Property="LegendSettings" ><br>

<Setter.Value><br>

<telerik:SeriesLegendSettings Title="{Binding Nombre}" /><br>

</Setter.Value><br>

</Setter><br>

<Setter Property="Stroke" Value="{Binding Background, Mode=TwoWay}" /><br>

<Setter Property="ToolTip" ><br>

<Setter.Value><br>

<StackPanel><br>

<TextBlock Text="{Binding Nombre, Mode=TwoWay}"/><br>

</StackPanel><br>

</Setter.Value><br>

</Setter><br>

<Setter Property="Visibility" Value="{Binding Visibility, Mode=TwoWay}" /><br>

<br>

</Style><br>

</telerik:CategoricalSeriesDescriptor.Style><br>

</telerik:CategoricalSeriesDescriptor><br>

<telerik:CategoricalSeriesDescriptor ItemsSourcePath="CondicionesOperacion.ListaDatos" CategoryPath="qGasBN" ValuePath="qLiquido"><br>

<telerik:CategoricalSeriesDescriptor.Style><br>

<Style TargetType="{x:Type telerik:PointSeries}"><br>

<Setter Property="ToolTip" Value="{Binding Nombre, Mode=TwoWay}"/><br>

<Setter Property="Visibility" Value="{Binding Visibility, Mode=TwoWay}" /><br>

<Setter Property="PointSize" Value="{Binding SizeP}" /><br>

<Setter Property="DefaultVisualStyle"><br>

<Setter.Value><br>

<Style TargetType="{x:Type Path}"><br>

<Setter Property="Fill" Value="{Binding Background}" /><br>

</Style><br>

</Setter.Value><br>

</Setter><br>

<br>

</Style><br>

</telerik:CategoricalSeriesDescriptor.Style><br>

</telerik:CategoricalSeriesDescriptor><br>

</telerik:ChartSeriesProvider><br>

</telerik:RadCartesianChart.SeriesProvider><br>

</telerik:RadCartesianChart>

<telerik:RadLegend Items="{Binding LegendItems, ElementName=rccgrafica}" Grid.Column="2" >
<telerik:RadLegend.ItemsPanel>
<ItemsPanelTemplate>
<telerik:RadWrapPanel />
</ItemsPanelTemplate>
</telerik:RadLegend.ItemsPanel>
<telerik:RadLegend.ItemTemplate>
<DataTemplate>
<Border Background="{Binding MarkerFill}" BorderThickness="1" BorderBrush="{Binding MarkerStroke}">
<Grid Width="95">
<CheckBox Checked="CheckBox_Checked" IsChecked="{Binding Presenter.Visibility, Converter={StaticResource visibilityToBooleanConverter}, Mode=TwoWay}" FontSize="10"/>
<TextBlock Text="{Binding Title}" Foreground="White" Margin="15,2,0,2" FontWeight="Normal" FontSize="10" />
</Grid>
</Border>
</DataTemplate>
</telerik:RadLegend.ItemTemplate>
</telerik:RadLegend>
</Grid>
</GroupBox>
</Grid>
</UserControl>

________________________________________________

MODELVIEW

private ObservableCollection<PozoCabecera> _ListaPozoCabecera;
public ObservableCollection<PozoCabecera> ListaPozoCabecera
{
get
{
return _ListaPozoCabecera;
}
set
{
_ListaPozoCabecera = value;

if (value.Count>0)
{
Global.objVariableEntradaViewModel.HabilitarOpciones = true;
objPozoCabecera = value[0];
Global.objVariableEntradaViewModel.TotalGas = _ListaPozoCabecera.Sum(x => x.objCabeceraPozoGBN.qGasBN).GetValueOrDefault();
Global.objVariableEntradaViewModel.TotalLiq = _ListaPozoCabecera.Sum(x => x.objCabeceraPozoGBN.qLiquido).GetValueOrDefault();
}
else
{
Global.objVariableEntradaViewModel.HabilitarOpciones = false;
Global.objVariableEntradaViewModel.opcion = null;
Global.objVariableEntradaViewModel.TotalGas = 0;
Global.objVariableEntradaViewModel.TotalLiq = 0;

}
this.OnPropertyChanged("ListaPozoCabecera");
}
}

ChartView

answered on 23 Aug 2019

7 answers

973 views

Customize Default Multiple Line Series Tooltip

Hi,

I need help customizing the default trackinfo tooltip for showing multiple line series values in the same tooltip at once (or achieve a tooltip similar to the one from the 'First Look' -see attached image).

I've been able to customize bar series tooltips in the past by doing something like the following, but using the same thing for line series doesn't show anything (it also only shows one series value at a time which isn't really what I'm trying to do):

<telerik:RadCartesianChart.Behaviors>

<telerik:ChartTooltipBehavior/>

</telerik:RadCartesianChart.Behaviors>

<telerik:RadCartesianChart.TooltipTemplate>

<DataTemplate>

<Border Background="White" BorderBrush="Black" BorderThickness="1" Padding="5" CornerRadius="3">

<StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Text="Tool Tip!" />

</StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Text="{Binding Label}" />

</StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Text="{Binding Category}" />

</StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Text="{Binding Value}" />

</StackPanel>

</Border>

</DataTemplate>

</telerik:RadCartesianChart.TooltipTemplate>

I can also show the default "Category: xxxx Value: xxxx" tooltip for multiple line series at once with this:

<telerik:RadCartesianChart.Behaviors>

<telerik:ChartTrackBallBehavior ShowIntersectionPoints="True" ShowTrackInfo="True"/>

</telerik:RadCartesianChart.Behaviors>

Is there any way to customize the "ShowTrackInfo" tooltip? I haven't been able to reapply the first look example directly because I'm dynamically adding/removing/changing the number of series in the chart. I'm doing that like this:

private void UpdateChart()

{

LineTrendChart.Series.Clear();

LineTrendChart.VerticalAxis = new LinearAxis();

LineTrendChart.HorizontalAxis = new CategoricalAxis();

for (int seriesIncrementer = 0; seriesIncrementer < numberOfSeries; seriesIncrementer++)

{

CategoricalSeries series1 = new LineSeries();

for (int i = 0; i < numberOfDataPointsToDisplay; i++)

{

series1.DataPoints.Add(new CategoricalDataPoint { Value = RawData[seriesIncrementer][i], Category = DateList[i].ToString("MM/dd") });

}

LineTrendChart.Series.Add(series1);

}

My gut tells me I'm missing something very simple but I've been at this for a little while and haven't gotten anywhere .

Thanks in advance for any help.

ChartView

answered on 23 Aug 2019

24 answers

678 views

GridView Spinner doesn't hide away (IsBusy)

Hello Telerik,

I have an issue when I try using your IsBusy property inside a grid.

Happens that the panel won't disappear. I tried using several of those "Loaded" events to make it happen manually (grid.IsBusy = false;), but then it won't even show at all.

I am using virtualization and infinite scrolling in my grid.

I just need a solution to hide the spinner when the data finish loading.

here is my code:

MainWindow.xaml

<Window x:Class="TelerikVirtualization.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

Title="MainWindow" Height="900" Width="700" >

<Window.Resources>

<Style x:Key="VitorStyle" TargetType="telerik:RadGridView" >

<Setter Property="AutoGenerateColumns" Value="False"></Setter>

<Setter Property="FilteringMode" Value="FilterRow"></Setter>

</Style>

</Window.Resources>

<Grid>

<Grid.Resources>

<DataTemplate x:Key="RowDetailsTemplate">

<telerik:RadGridView Name="playersGrid" Style="{StaticResource VitorStyle}" IsBusy="True"

ItemsSource="{Binding Children}" >

<telerik:RadGridView.ControlPanelItems>

<telerik:ControlPanelItem ButtonTooltip="Column chooser">

<telerik:ControlPanelItem.Content>

<ListBox ItemsSource="{Binding Columns}" BorderThickness="0">

<ListBox.ItemTemplate>

<DataTemplate>

<CheckBox Content="{Binding Header, Mode=OneWay}" IsChecked="{Binding IsVisible, Mode=TwoWay}" />

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</telerik:ControlPanelItem.Content>

</telerik:ControlPanelItem>

</telerik:RadGridView.ControlPanelItems>

<telerik:RadGridView.Columns>

<telerik:GridViewDataColumn DataMemberBinding="{Binding ID}"/>

<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"/>

<telerik:GridViewDataColumn DataMemberBinding="{Binding ParentID}"/>

</telerik:RadGridView.Columns>

</telerik:RadGridView>

</DataTemplate>

</Grid.Resources>

<telerik:RadGridView Name="RadGridView" ItemsSource="{Binding View}" Style="{StaticResource VitorStyle}" IsBusy="True"

RowDetailsTemplate="{StaticResource RowDetailsTemplate}" AutoGenerateColumns="False">

<telerik:RadGridView.Columns>

<telerik:GridViewToggleRowDetailsColumn/>

<telerik:GridViewDataColumn DataMemberBinding="{Binding ID}"/>

<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"/>

<telerik:GridViewDataColumn DataMemberBinding="{Binding UnitPrice}" Header="UnitPrice" />

<telerik:GridViewDataColumn DataMemberBinding="{Binding Date}"

Header="Date"

DataFormatString="{}{0:dd/MM/yyyy}"/>

<telerik:GridViewDataColumn DataMemberBinding="{Binding Discontinued}"/>

</telerik:RadGridView.Columns>

<telerik:RadGridView.ControlPanelItems>

<telerik:ControlPanelItem ButtonTooltip="Column chooser">

<telerik:ControlPanelItem.Content>

<ListBox ItemsSource="{Binding Columns}" BorderThickness="0">

<ListBox.ItemTemplate>

<DataTemplate>

<CheckBox Content="{Binding Header, Mode=OneWay}" IsChecked="{Binding IsVisible, Mode=TwoWay}" />

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</telerik:ControlPanelItem.Content>

</telerik:ControlPanelItem>

</telerik:RadGridView.ControlPanelItems>

</telerik:RadGridView>

</Grid>

</Window>

MainWindow.xaml.cs

using System.ComponentModel;

using System.Windows;

namespace TelerikVirtualization

{

/// <summary>

/// Interaction logic for MainWindow.xaml

/// </summary>

public partial class MainWindow : Window

{

BackgroundWorker worker = new BackgroundWorker();

public MainWindow()

{

InitializeComponent();

DataContext = new ViewModel();

}

ViewModel.cs *(install Fody.PropertyChanged nugget to make have it compiling)

using PropertyChanged;

using System;

using System.Collections.Generic;

using System.Collections.ObjectModel;

using Telerik.Windows.Data;

using System.Linq;

using System.Collections;

namespace TelerikVirtualization

{

[ImplementPropertyChanged]*

public class ViewModel

{

public VirtualQueryableCollectionView View { get; set; }

Controller controller;

public ViewModel()

{

controller = new Controller();

View = new VirtualQueryableCollectionView(controller.GetList()) { LoadSize = 10 };

}

Controller.cs

using System;

using System.Linq;

namespace TelerikVirtualization

{

public class Controller

{

public IQueryable GetList()

{

DataClasses1DataContext context = new DataClasses1DataContext();

var result = from x in context.MyTables

select new MyTableEntity() {

Date = x.Date.GetValueOrDefault(DateTime.Now),

Name = x.Name,

UnitPrice = x.UnitPrice.GetValueOrDefault(0),

id = x.ID,

Discontinued = x.Discontinued,

Children = (from y in context.MyChildTables

where y.ParentID == x.ID

select new MyChildTableEntity { ID = y.ID, Name = y.Name, ParentID = y.ParentID })

};

return result;

}

public class MyTableEntity

{

public int id { get; set; }

public string Name { get; set; }

public decimal UnitPrice { get; set; }

public DateTime Date { get; set; }

public object Children { get; set; }

public bool ? Discontinued { get; set; }

}

public class MyChildTableEntity

{

public int ID { get; set; }

public string Name { get; set; }

public int ? ParentID { get; set; }

}

Thank you.

GridView

answered on 23 Aug 2019

5 answers

560 views

SelectedItem Bindable in MVVM

Hi.
Just a question: The SelectedItem is not bindable to a property in the ViewModel on a MVVM pattern?

If not, how to get the selectedItem in the ViewModel?
I need becouse I've to manage the add and remove buttons.

Thanks and regards.

Andrea

TreeView