Questions on UI for WPF Forum

1 answer

176 views

Newbie attempting to use the Carousel control. The defaults of the control work fine for my needs, but I want to change the number of panels in the control. I only have 3 items that I want to use in the carousel, which are images. However, by default the carousel has 5 or 6 panels. I only want 3 panels for my 3 images in the carousel. How do I change the number of panels in the carousel?

Carousel

answered on 16 Mar 2021

2 answers

213 views

RadDocking Tabbed Pane Content Loading

Hello

I have an application that uses RadDocking with tabbed RadPanes containing RadGridViews. It appears that the default behaviour of RadDocking is to lazy load the contents and data of a pane only when the tab is selected - so the data in my RadGridViews is only loaded when a tab is brought into view.

So, in this example the DataLoaded event for FirstGrid will fire on startup as FirstTab is the pane in view. The Dataloaded event for SecondGrid will only fire when the user selects SecondTab and brings it into view:

<telerik:RadDocking>

<telerik:RadDocking.DocumentHost>

<telerik:RadPaneGroup>

<telerik:RadPane

x:Name="FirstTab"

Title="First">

<telerik:RadGridView

x:Name="FirstGrid"

ItemsSource="{Binding Items}"

AutoGenerateColumns="True"

DataLoaded="FirstGrid_DataLoaded"/>

</telerik:RadPane>

<telerik:RadPane

x:Name="SecondTab"

Title="Second">

<telerik:RadGridView

x:Name="SecondGrid"

ItemsSource="{Binding Items}"

AutoGenerateColumns="True"

DataLoaded="SecondGrid_DataLoaded"/>

</telerik:RadPane>

</telerik:RadPaneGroup>

</telerik:RadDocking.DocumentHost>

</telerik:RadDocking>

Whilst I can see the benefit of this behaviour, my application has a requirement to ensure that all the data is loaded at startup - partly for performance purposes, but also for another reason.

Is there a way to override the default behaviour and force the contents of all the tabs to load on startup?

Thanks for any help

Dave

Docking

answered on 15 Mar 2021

2 answers

237 views

Bind SamplingThreshold

Hi,

I have a WPF application in which we have made a trend component which should be able to a display a large amount of log values.

We have not been using Sampling until now. So the SamplingThreshold has always been 200 (as I understand is the default value). This makes some of of the trends misleading, since some of the lowest/highest values wont be displayed because they are clustered with other datapoints.

What we would like to to, is to set the SamplingThreshold depending on how many log values we have, and depending on what kind of screen resolution the user has (some of out customers computers are out in a lab environment and has something like a 1280 x 800 res).

My problem now however, is that I'm not able to bind the SamplingThreshold property.

I have a generic.xaml which datacontext is a ChartViewViewModel.

Generic:

<telerik:RadCartesianChart x:Name="PART_Chart" Zoom="{Binding ChartZoom, Mode=TwoWay}" PanOffset="{Binding ChartPanOffset, Mode=TwoWay}">

<telerik:RadCartesianChart.TrackBallInfoStyle>

<Style TargetType="telerik:TrackBallInfoControl">

<Setter Property="Header" Value="{Binding DataContext.TrackBallHeader, RelativeSource={RelativeSource AncestorType=local:ChartView}}" />

</Style>

</telerik:RadCartesianChart.TrackBallInfoStyle>

<telerik:RadCartesianChart.Resources>

<DataTemplate x:Key="trackBallInfoTemplate">

<StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Text="{Binding DataPoint.Presenter.DataContext.Title}"/>

<TextBlock Text=": " />

<TextBlock Text="{Binding DataPoint.Value, Converter={StaticResource TrimToTwoDecimalsConverter}}" />

</StackPanel>

</DataTemplate>

<DataTemplate x:Key="PointCustomTemplate">

<Ellipse Height="3" Width="3" Fill="{Binding DataContext.Color, RelativeSource={RelativeSource AncestorType=telerik:PointSeries}}"/>

</DataTemplate>

<Style TargetType="telerik:LinearAxis">

<Setter Property="LabelTemplate">

<Setter.Value>

<DataTemplate>

<TextBlock Text="{Binding}" Foreground="{telerik:VisualStudio2013Resource ResourceKey=MarkerBrush}"/>

</DataTemplate>

</Setter.Value>

</Setter>

</Style>

<Style TargetType="telerik:DateTimeContinuousAxis">

<Setter Property="LabelTemplate">

<Setter.Value>

<DataTemplate>

<TextBlock Text="{Binding}" Foreground="{telerik:VisualStudio2013Resource ResourceKey=MarkerBrush}"/>

</DataTemplate>

</Setter.Value>

</Setter>

</Style>

<Style TargetType="telerik:LineSeries">

<Setter Property="StrokeThickness" Value="1" />

<Setter Property="Stroke" Value="{Binding Color}" />

<Setter Property="TrackBallInfoTemplate" Value="{StaticResource trackBallInfoTemplate}" />

<Setter Property="VerticalAxis" Value="{Binding Axis}" />

<Setter Property="Visibility" Value="{Binding IsVisible, Converter={StaticResource VisibilityConverter}}"/>

<Style.Triggers>

<DataTrigger Binding="{Binding IsSelected}" Value="true">

<Setter Property="Opacity" Value="1" />

</DataTrigger>

<DataTrigger Binding="{Binding IsSelected}" Value="false">

<Setter Property="Opacity" Value="0.2" />

</DataTrigger>

</Style.Triggers>

</Style>

<Style TargetType="telerik:SplineSeries">

<Setter Property="StrokeThickness" Value="1" />

<Setter Property="Stroke" Value="{Binding Color}" />

<Setter Property="TrackBallInfoTemplate" Value="{StaticResource trackBallInfoTemplate}" />

<Setter Property="VerticalAxis" Value="{Binding Axis}" />

<Setter Property="Visibility" Value="{Binding IsVisible, Converter={StaticResource VisibilityConverter}}"/>

<Style.Triggers>

<DataTrigger Binding="{Binding IsSelected}" Value="true">

<Setter Property="Opacity" Value="1" />

</DataTrigger>

<DataTrigger Binding="{Binding IsSelected}" Value="false">

<Setter Property="Opacity" Value="0.2" />

</DataTrigger>

</Style.Triggers>

</Style>

<Style TargetType="telerik:StepLineSeries">

<Setter Property="StrokeThickness" Value="1" />

<Setter Property="Stroke" Value="{Binding Color}" />

<Setter Property="TrackBallInfoTemplate" Value="{StaticResource trackBallInfoTemplate}" />

<Setter Property="VerticalAxis" Value="{Binding Axis}" />

<Setter Property="Visibility" Value="{Binding IsVisible, Converter={StaticResource VisibilityConverter}}"/>

<Style.Triggers>

<DataTrigger Binding="{Binding IsSelected}" Value="true">

<Setter Property="Opacity" Value="1" />

</DataTrigger>

<DataTrigger Binding="{Binding IsSelected}" Value="false">

<Setter Property="Opacity" Value="0.2" />

</DataTrigger>

</Style.Triggers>

</Style>

<Style TargetType="telerik:PointSeries">

<Setter Property="PointTemplate" Value="{StaticResource PointCustomTemplate}"></Setter>

<Setter Property="TrackBallInfoTemplate" Value="{StaticResource trackBallInfoTemplate}" />

<Setter Property="VerticalAxis" Value="{Binding Axis}" />

<Setter Property="Visibility" Value="{Binding IsVisible, Converter={StaticResource VisibilityConverter}}"/>

<Style.Triggers>

<DataTrigger Binding="{Binding IsSelected}" Value="true">

<Setter Property="Opacity" Value="1" />

</DataTrigger>

<DataTrigger Binding="{Binding IsSelected}" Value="false">

<Setter Property="Opacity" Value="0.2" />

</DataTrigger>

</Style.Triggers>

</Style>

</telerik:RadCartesianChart.Resources>

<telerik:RadCartesianChart.TrackBallLineStyle>

<Style TargetType="Polyline">

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

<Setter Property="Opacity" Value="{Binding IsTrackballVisible, Converter={StaticResource BoolToOpacityConverter}}"/>

</Style>

</telerik:RadCartesianChart.TrackBallLineStyle>

<telerik:RadCartesianChart.Grid>

<telerik:CartesianChartGrid MajorLinesVisibility="XY" />

</telerik:RadCartesianChart.Grid>

<telerik:RadCartesianChart.Behaviors>

<telerik:ChartPanAndZoomBehavior x:Name="PART_PanAndZoomBehavior" ZoomMode="Both" PanMode="Both" />

<telerik:ChartTrackBallBehavior x:Name="PART_ChartTrackBallBehavior" ShowIntersectionPoints="{Binding IsTrackballVisible}" ShowTrackInfo="{Binding IsTrackballVisible}" />

</telerik:RadCartesianChart.Behaviors>

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:DateTimeContinuousAxis MajorStepUnit="{Binding MajorStepUnit}" MajorStep="{Binding MajorStep}" LabelFormat="{Binding HorizontalAxisLabelFormat}" LabelFitMode="MultiLine" />

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.VerticalAxis>

<telerik:LinearAxis />

</telerik:RadCartesianChart.VerticalAxis>

<telerik:RadCartesianChart.SeriesProvider>

<telerik:ChartSeriesProvider Source="{Binding Series}">

<telerik:CategoricalSeriesDescriptor CategoryPath="LoggingTime"

ValuePath="Value"

ItemsSourcePath="LogValues"

TypePath="SeriesType"

TypeConverter="{StaticResource SeriesTypeConverter}" >

<telerik:CategoricalSeriesDescriptor.ChartDataSourceStyle>

<Style TargetType="telerik:ChartDataSource" >

<Setter Property="SamplingThreshold" Value="20"/>

</Style>

</telerik:CategoricalSeriesDescriptor.ChartDataSourceStyle>

</telerik:CategoricalSeriesDescriptor>

</telerik:ChartSeriesProvider>

</telerik:RadCartesianChart.SeriesProvider>

</telerik:RadCartesianChart>

The code above works as intended, setting the value to SamplingThreshold 20.

Now I want to bind the SamplingThreshold to the ViewModel like below. ChartView is what works as the code behind where the DataContext is set to the ChartViewViewModel.

<telerik:RadCartesianChart.SeriesProvider>

<telerik:ChartSeriesProvider Source="{Binding Series}">

<telerik:CategoricalSeriesDescriptor CategoryPath="LoggingTime"

ValuePath="Value"

ItemsSourcePath="LogValues"

TypePath="SeriesType"

TypeConverter="{StaticResource SeriesTypeConverter}" >

<telerik:CategoricalSeriesDescriptor.ChartDataSourceStyle>

<Style TargetType="telerik:ChartDataSource" >

<Setter Property="SamplingThreshold" Value="{Binding DataContext.SamplingThresholdValue, RelativeSource={RelativeSource AncestorType=local:ChartView}}"/>

</Style>

</telerik:CategoricalSeriesDescriptor.ChartDataSourceStyle>

</telerik:CategoricalSeriesDescriptor>

</telerik:ChartSeriesProvider>

</telerik:RadCartesianChart.SeriesProvider>

public ChartView()

{

this.DefaultStyleKey = typeof(ChartView);

var container = ChartViewContainerFactory.CretateContainer(DesignerProperties.GetIsInDesignMode(this));

viewModel = container.Resolve<IChartViewViewModel>();

DataContext = viewModel;

}

And in the ViewModel the SamplingThresholdValue is set to 20 in the constructor.
But if I try to get the SamplingThreshold from the CategoricalSeriesDescriptor Style in code behind after the chart is loaded, the value for SamplingThreshold is always unset when it's binded.
I understand that the SamplingThreshold cant be changed when the trend is loaded. But if the value is set in the ViewModel before its loaded, it should be able to find the correct value.

I have also tried the approach where you create a ChartDatasource:

<telerik:ChartDataSource x:Name="chartDataSource1" ItemsSource="{Binding Series}" SamplingThreshold="20"/>

Then bind the Seriesprovider to the DataSource:

<telerik:ChartSeriesProvider Source="{Binding ElementName=chartDataSource1}">

But when I try this the SamplingThreshold value of 20 set directly in the ChartDataSource won't even be used. It still is unset and has the default value of 200.
All I want to do is to be able to set the SamplingThreshold dynamicly before the chart itself is loaded.
Do you have any idea what I might do wrong here?

Kind Regards, Johannes

ChartView

answered on 15 Mar 2021

3 answers

140 views

Problem with WatermarkBehavior 'HiddenWhenFocused'

Hello,

I am using your WatermarkTextBox inside a RadToolBar.The property 'WatermarkBehavior' is set to 'HiddenWhenFocused'.

Now when I am click on an area outside the RadToolBar, the Watermark text isn't reset due to the LostFocus-Event for the control is not called.

Can you help me with a workaround for that?

Thanks!

Tobias

WatermarkTextBox

answered on 15 Mar 2021

1 answer

145 views

RadOpenFolderDialog context menu causes errors

The context menu of RadOpenFolderDialog causes multiple exceptions, e.g. an arithmetic overflow.

Here are the steps to reproduce with the demo application:

- Select a folder

- Create new folder

- Right click on new folder and delete it

When I'm trying to use the context menu from my own application, than my application crashes immediately.

And a minor problerm: For some reason the navigation buttons in the upper left part of the dialog are missing in my application. Any idea how to solve this?

Thanks,

Michael

FileDialogs

answered on 15 Mar 2021

3 answers

174 views

Breaking changes in DataForm in version 2021.1.119

Hi @ all,

In the last WPF build the DataForm control got changed (single, multiple editors).
But this change broke some other functionality of the control.

I attached a screenshot of small test project when using controls from version 2020.3.1020
And also the screenshot when using controls from version 2021.1.119

This is basically the XAML code I used for the view:

<Window

x:Class="TelerikDataFormTest.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"

Width="525"

Height="350">

<Window.Resources>

<DataTemplate x:Key="DataFormEditTemplate">

<StackPanel Margin="10">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="0.5*" />

</Grid.ColumnDefinitions>

<StackPanel Grid.Column="0">

<telerik:DataFormDataField DataMemberBinding="{Binding DataName}" Label="Name" />

<telerik:DataFormDataField Label="Date">

<telerik:RadDatePicker SelectedValue="{Binding DataDate}" TodayButtonVisibility="Visible" />

</telerik:DataFormDataField>

<telerik:DataFormDataField Label=" ">

<telerik:RadButton

Width="250"

Margin="0,5,0,5"

HorizontalAlignment="Left"

Content="Test Button" />

</telerik:DataFormDataField>

</StackPanel>

<StackPanel Grid.Column="1">

<telerik:DataFormDataField DataMemberBinding="{Binding DataName}" Label="Name" />

<telerik:DataFormDataField Label="Date">

<telerik:RadDatePicker SelectedValue="{Binding DataDate}" TodayButtonVisibility="Visible" />

</telerik:DataFormDataField>

<telerik:DataFormDataField Label=" ">

<telerik:RadButton

Width="250"

Margin="0,5,0,5"

HorizontalAlignment="Left"

Content="Test Button" />

</telerik:DataFormDataField>

</StackPanel>

</Grid>

</StackPanel>

</DataTemplate>

<DataTemplate x:Key="DataFormReadOnlyTemplate">

<StackPanel Margin="10">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="0.5*" />

</Grid.ColumnDefinitions>

<StackPanel Grid.Column="0">

<telerik:DataFormDataField DataMemberBinding="{Binding DataName}" Label="Name" />

<telerik:DataFormDataField Label="Date">

<telerik:RadDatePicker SelectedValue="{Binding DataDate}" TodayButtonVisibility="Visible" />

</telerik:DataFormDataField>

<telerik:DataFormDataField Label=" ">

<telerik:RadButton

Width="150"

Margin="0,5,0,5"

HorizontalAlignment="Left"

Content="Test Button" />

</telerik:DataFormDataField>

</StackPanel>

<StackPanel Grid.Column="1">

<telerik:DataFormDataField DataMemberBinding="{Binding DataName}" Label="Name" />

<telerik:DataFormDataField Label="Date">

<telerik:RadDatePicker SelectedValue="{Binding DataDate}" TodayButtonVisibility="Visible" />

</telerik:DataFormDataField>

<telerik:DataFormDataField Label=" ">

<StackPanel>

<telerik:RadButton

Width="150"

Margin="0,5,0,5"

HorizontalAlignment="Left"

Content="Test Button" />

</StackPanel>

</telerik:DataFormDataField>

</StackPanel>

</Grid>

</StackPanel>

</DataTemplate>

</Window.Resources>

<Grid>

<telerik:RadDataForm

Width="400"

Height="300"

HorizontalAlignment="Left"

VerticalAlignment="Top"

AutoEdit="True"

AutoGenerateFields="False"

CurrentItem="{Binding Data}"

EditTemplate="{StaticResource DataFormEditTemplate}"

ReadOnlyTemplate="{StaticResource DataFormReadOnlyTemplate}" />

</Grid>

</Window>

Until the change this worked for years now and is also used in our projects.
The question is: Is this a bug or a wanted behaviour of this control.
If there won't be a chance to use the old setting somehow we're stuck with the old version from now on.

I'm really looking forward to your suggestion on this topic.

Kind Regards,
Thomas

DataForm

answered on 12 Mar 2021

2 answers

201 views

Remove all options except RGB?

Can I remove or lock so that the user only can use RGB?

ColorEditor

answered on 12 Mar 2021

2 answers

155 views

SelectedItem behavior for IBindingList

Version 2020.3.1020.310

I know BindingList is old from WinForms but why does it behave differently to ObservableCollection<T> and is it correct?

Take this xaml and the code and run it. When a new row is added the SelectedItem changes before accepting the new row. Press escape twice to cancel the new row and the SelectedItem does not change, it is still set to the now canceled item. Change the ItemsSource Binding from `TradeBindingList` to `Trades` and repeat. You'll notice that SelectedItem is not changed when adding a new row. This latter behavior is much more preferable and is correct as it does not leave the SelectedItem incorrect. Why is this?

        <telerik:RadGridView ItemsSource="{Binding TradeBindingList}" IsSynchronizedWithCurrentItem="True" CanUserInsertRows="True" NewRowPosition="Top" SelectedItem="{Binding SelectedTrade, Mode=TwoWay}"

                             AutoGenerateColumns="False">

            <telerik:RadGridView.Columns>

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

            </telerik:RadGridView.Columns>     

        </telerik:RadGridView>

    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        object selectedTrade;

        public MainWindow()
        {
            InitializeComponent();
            Trades = new ObservableCollection<Trade>
            {
                new Trade(),
            };
            TradeBindingList = new BindingList<Trade>
            {
                new Trade(),
            };
            DataContext = this;
        }

        public ObservableCollection<Trade> Trades { get; set; }
        public BindingList<Trade> TradeBindingList { get; set; }

        public object SelectedTrade
        {
            get => selectedTrade;
            set
            {
                selectedTrade = value;
                Debug.WriteLine("Selected changed");
                OnPropertyChanged();
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        [NotifyPropertyChangedInvocator]
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public class Trade : ViewModelBase
    {
        public Trade()
        {
            TradeNumber = "1";
        }
        public string TradeNumber { get; set; }
    }

GridView

answered on 10 Mar 2021

6 answers

370 views

Can I dynamically show/hide the trackball completely?

I am able to dynamically show/hide all elements of the chart trackball info on a chart except for the trackball line. That element I cannot seem to change once the chart is showing.

Here is where I set the line style of the trackball line just as recommended in Telerik's article. The only difference is that did not set the visiblity to a hard-coded value. Instead I bound it to a dependency property on my control using my well-tested bool-to-visiblity converter

<tk:RadCartesianChart x:Name="Chart" >

<tk:RadCartesianChart.TrackBallLineStyle>

<Style TargetType="Polyline">

<Setter Property="Visibility"

Value="{Binding ElementName=Root, Path=ShowInfo, Converter={StaticResource CvtBoolToVis}}" />

</Style>

</tk:RadCartesianChart.TrackBallLineStyle>

Unfortunately that Visiblity binding in the line style is only evaluated the very first time the chart displays. AFter that, it doesn't matter if I change that boolean "ShowInfo" property or not. The binding never gets re-evaluated.

I've put a breakpoint in my converter to make sure it gets evaluated correctly the first time.
I've put a breakpoint in the dependency property to verify that it truly does change. And I even bind properties of the TrackBallBehavior to that very same ShowInfo property and their bindings DO get re-evaluated when it changes so I know that works.

<tk:ChartTrackBallBehavior ShowIntersectionPoints="{Binding ElementName=Root, Path=ShowInfo}"

ShowTrackInfo="{Binding ElementName=Root, Path=ShowInfo}"

SnapMode="ClosestPoint"

/>

So how can I dynamically show/hide the trackball line?

ChartView

answered on 10 Mar 2021

2 answers

263 views

Customization of the time ruler

I would like to tweak the timeline to have it work as a "slider" for a video editing like behavior. I have made some tests and tweaks but there are a couple of points I don't manage to tweak:

1. Having a thumb position which can be set by click.

I have managed to display a bar that can move from code using the annotations and a negative margin but I would like to know if there is a way to make it work like a slider thumb (i.e. click or drag&drop)?

2. I have some trouble to find how to use custom interval type to display the text every X seconds but keep some ticks at a smaller interval (see timeline 1).

3. Is it possible to display only specific times (for example beginning and ending time) either on the ruler or as on timeline 3 image?

Note that I am using the NuGet packages and Fluent Dark Theme.

TimeLine

answered on 10 Mar 2021