Questions on UI for WPF Forum

1 answer

201 views

RadGridView column changes width when OnPropertyChanged is called and grid scrollbar is visible

Windows 10
.NET Framework 4.8
Telerik 2022.1.222.45

Hi
I encountered a problem with the RadGridView when I have three columns defined and as shown here (MainWindow.xaml):

<Window
  x:Class="TestGridView.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
  Title="MainWindow"
  Width="800"
  Height="450"
  mc:Ignorable="d">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <telerik:RadGridView AutoGenerateColumns="False" ItemsSource="{Binding DummyData}">
      <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn
          Width="Auto"
          MinWidth="32"
          DataMemberBinding="{Binding Column01}"
          Header="Column01" />

        <telerik:GridViewDataColumn
          Width="Auto"
          MinWidth="250"
          DataMemberBinding="{Binding Column02}"
          Header="Column02" />

        <telerik:GridViewDataColumn
          Width="*"
          MinWidth="250"
          DataMemberBinding="{Binding Column03}"
          Header="Column03" />
      </telerik:RadGridView.Columns>
    </telerik:RadGridView>

    <Button
      Grid.Row="1"
      Click="Button_Click"
      Content="Refresh" />
  </Grid>
</Window>

Column 1 and 2 have defined Width="Auto" and the last column 3 have defined Width="*".

The problem is now when I run the application and increase the column width of column 2 and reduce window width so you can see the horizontal grid scrollbar and then press the "Refresh" button the width of the columns will change sometimes.

For having the complete example here is the code for MainWindow.xaml.cs

using System.Collections.Generic;
using System.Windows;

namespace TestGridView
{
  /// <summary>
  /// Interaction logic for MainWindow.xaml
  /// </summary>
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();
      DataContext = this;
      LoadData();
    }

    public List<DataViewModel> DummyData { get; } = new List<DataViewModel>();

    private void LoadData()
    {
      for (var i = 0; i < 15; i++)
      {
        DummyData.Add(new DataViewModel() { Column01 = "Col01_" + i, Column02 = "Col02_" + i, Column03 = "Col03_" + i });
      }
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
      foreach (var vm in DummyData)
      {
        vm.UpdateProperties();
      }
    }
  }
}

And the code vor the DataViewModel:

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace TestGridView
{
  public class DataViewModel: INotifyPropertyChanged
  {
    public string Column01 { get; set; }

    public string Column02 { get; set; }

    public string Column03 { get; set; }

    public void UpdateProperties()
    {
      OnPropertyChanged(nameof(Column01));
      OnPropertyChanged(nameof(Column02));
      OnPropertyChanged(nameof(Column03));
    }

    public event PropertyChangedEventHandler PropertyChanged;

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

When I replace the RadGridView with the WPF built in DataGrid, Everything works as expected!

Here is the code for MainWindow.xaml with the WPF DataGrid:

<Window
  x:Class="TestGridView.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
  Title="MainWindow"
  Width="800"
  Height="450"
  mc:Ignorable="d">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
        <DataGrid
      MaxHeight="150"
      AutoGenerateColumns="False"
      ItemsSource="{Binding DummyData}"
      ScrollViewer.CanContentScroll="True"
      ScrollViewer.HorizontalScrollBarVisibility="Auto"
      ScrollViewer.VerticalScrollBarVisibility="Auto">
            <DataGrid.Columns>
                <DataGridTextColumn
          Width="Auto"
          MinWidth="32"
          Binding="{Binding Column01}" />
                <DataGridTextColumn
          Width="Auto"
          MinWidth="250"
          Binding="{Binding Column02}" />
                <DataGridTextColumn
          Width="*"
          MinWidth="250"
          Binding="{Binding Column03}" />
            </DataGrid.Columns>
        </DataGrid>
        <Button
      Grid.Row="1"
      Click="Button_Click"
      Content="Refresh" />
  </Grid>
</Window>

Do I miss something or what could be a solution to fix this problem ?

Thanks!

GridView

answered on 13 Feb 2023

1 answer

95 views

Multiple AppointmentDialogStyle for different Appointment Types

I have a Class Aa that inherits from Appointment and in addition, I have created Classes Bb and Cc.

Class Aa contains two properties, BbProperty and CcProperty.

This logic is to be able to work with two different types of appointments.

My goal is to be able to give one custom EditDialog when Aa.BbProperty is pressed

And another custom EditDialog when Aa.CcProperty is pressed.

I can distinguish when its BbProperty and when its CcProperty as you can see in the picture,

That I created a different template for each of them.

I was able to change properties of the DialogWindow like background,

But I want a completely different template for each of the types.

I am attached my example project here,

Would appreciate help,

Thanks

ScheduleView

answered on 13 Feb 2023

0 answers

111 views

RadChartView - Async chart

Hi, I'm Seungbum Park.

First of all, plz understand that I am not good at English.

I have two questions.

1. I am referring to the Domo project in SDK beacause I want to show Async Data as a chart. However, I want the data on the X-Axis to behave like Stopwatch, but I have tried many times and failed. I'd like to get some advice on this.

2. I don't understand about Specific Properties named 'TickOrigin' .

The above two problems need to be solved to purchase a license from my company. I'd appreciate your help.

ChartView

asked on 10 Feb 2023

1 answer

151 views

GridViewMultiColumnComboBoxColumn search not working when name starts with a special character

Hi,

I am using a GridViewMultiColumnComboBoxColumn in my GridView defined with the following code:

<telerik:RadGridView Grid.Row="1"
AutoGenerateColumns="False"
CanUserDeleteRows="False"
CanUserInsertRows="False"
CanUserGroupColumns="False"
CanUserReorderColumns="False"
CanUserSortColumns="False"
IsFilteringAllowed="False"
ShowGroupPanel="False"
RowIndicatorVisibility="Collapsed"
GroupRenderMode="Flat"
ItemsSource="{Binding Materials}"
AutoExpandGroups="True">
<telerik:RadGridView.GroupDescriptors>
<telerik:GroupDescriptor Member="Category" />
</telerik:RadGridView.GroupDescriptors>
<telerik:RadGridView.Columns>
<telerik:GridViewDataColumn DataMemberBinding="{Binding Label}"
Header="Name"
HeaderTextAlignment="Center"
TextAlignment="Center"
IsReadOnly="True"
CellStyleSelector="{StaticResource ReadOnlyStyle}"
Width="Auto" />
<telerik:GridViewMultiColumnComboBoxColumn DataMemberBinding="{Binding RefSize}"
DisplayMemberPath="Size"
Header="Size"
HeaderTextAlignment="Center"
ItemsSource="{Binding PossibleSizes}"
TextAlignment="Right"
CellStyleSelector="{StaticResource ReadOnlyStyle}"
Width="250"
AutoGenerateColumns="False"
CloseDropDownAfterSelectionInput="True"
SelectionMode="Single"
SelectionBoxesVisibility="Hidden"
CanUserSearchInHiddenColumns="False"
DropDownHeight="350"
AutoCompleteMode="Search">
<telerik:GridViewMultiColumnComboBoxColumn.Columns>
<telerik:GridViewDataColumn DataMemberBinding="{Binding Material}" ShowFieldFilters="False" />
<telerik:GridViewDataColumn DataMemberBinding="{Binding Size}" ShowFieldFilters="False" />
</telerik:GridViewMultiColumnComboBoxColumn.Columns>
</telerik:GridViewMultiColumnComboBoxColumn>
</telerik:RadGridView.Columns>
</telerik:RadGridView>

Everything seems to be working fine except when I try to search for a value whose name starts with the '-' character (for example '-2Ni50'). Can you tell me what I should do to fix that?

Thanks in advance,

Quentin

GridView

answered on 10 Feb 2023

0 answers

119 views

[WPF] ChartSeriesDescriptor.TypeConverter in RadCartesianChart

Hello Telerik,

I'm using a RadCartesianChart in WPF allowing a complete customization of the chart.

        <chart:RadCartesianChart x:Name="BarChart"   Visibility="{Binding VisibilityBars, Mode=OneTime}" Grid.ColumnSpan="2">
            <telerik:RadCartesianChart.SmartLabelsStrategy>
                <telerik:ChartSmartLabelsStrategy />
            </telerik:RadCartesianChart.SmartLabelsStrategy>

            <!--Series-->
            <telerik:RadCartesianChart.SeriesProvider>
                <telerik:ChartSeriesProvider Source="{Binding Series}"   >
                    <telerik:ChartSeriesDescriptor ItemsSourcePath="DisplayValues"  TypePath="ShapeType" >
                        <telerik:ChartSeriesDescriptor.TypeConverter>
                            <conv:ShapeTypeToSeriesTypeConverter ChartType="Bar"  />
                        </telerik:ChartSeriesDescriptor.TypeConverter>
                    </telerik:ChartSeriesDescriptor> 
                </telerik:ChartSeriesProvider>
            </telerik:RadCartesianChart.SeriesProvider>


            <!--Axes-->
            <chart:RadCartesianChart.HorizontalAxis>
                <chartView:CategoricalAxis x:Name="horizontalAxis"  
									      Title="{Binding HorizontalAxisTitle}"  
                                          />
            </chart:RadCartesianChart.HorizontalAxis>

            <chart:RadCartesianChart.VerticalAxis>
                <chartView:LinearAxis x:Name="verticalAxis" 
									      Title="{Binding VerticalAxisTitle}"  
                                          MajorStep="{Binding VerticalAxisMajorStep}" 
									      Minimum="{Binding VerticalAxisMinimum}" 
                                          Maximum="{Binding VerticalAxisMaximum}" 
									      HorizontalLocation="Left" />
            </chart:RadCartesianChart.VerticalAxis>

            <chart:RadCartesianChart.Grid>
                <chartView:CartesianChartGrid MajorLinesVisibility="XY" />
            </chart:RadCartesianChart.Grid>
        </chart:RadCartesianChart>

The chart allows the possibility to custom the series for the PointType and the PointShape. I'm using a ShapeTypeToSeriesTypeConverter class, as below:

Public Class ShapeTypeToSeriesTypeConverter
        Implements IValueConverter
        Public Property ChartType As String


        Public Function Convert(value As Object, targetType As Type, parameter As Object, culture As CultureInfo) As Object Implements IValueConverter.Convert

            If value Is Nothing OrElse TypeOf (value) IsNot ChartSerieModel.ShapeTypes Then
                Return Nothing
            End If

            Dim ShapeType As ChartSerieModel.ShapeTypes = CType(value, ChartSerieModel.ShapeTypes)
            Select Case ChartType
                Case "Radar"
                    Select Case ShapeType
                        Case ChartSerieModel.ShapeTypes.None
                            Return GetType(RadarPointSeries)

                        Case ChartSerieModel.ShapeTypes.Line, ChartSerieModel.ShapeTypes.DashedLine
                            Return GetType(RadarLineSeries)

                        Case ChartSerieModel.ShapeTypes.Area
                            Return GetType(RadarAreaSeries)

                        Case Else
                            Return Nothing
                    End Select
                Case "Scatter"
                    Select Case ShapeType
                        Case ChartSerieModel.ShapeTypes.None
                            Return GetType(ScatterPointSeries)

                        Case ChartSerieModel.ShapeTypes.Line, ChartSerieModel.ShapeTypes.DashedLine
                            Return GetType(ScatterLineSeries)

                        Case ChartSerieModel.ShapeTypes.Area
                            Return GetType(ScatterAreaSeries)
                        Case Else
                            Return Nothing
                    End Select

                Case Else
                    Select Case ShapeType
                        Case ChartSerieModel.ShapeTypes.None
                            Return GetType(PointSeries)

                        Case ChartSerieModel.ShapeTypes.Line, ChartSerieModel.ShapeTypes.DashedLine
                            Return GetType(StepLineSeries)

                        Case ChartSerieModel.ShapeTypes.Area
                            Return GetType(BarSeries)
                        Case Else
                            Return Nothing
                    End Select
            End Select
        End Function

        Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, culture As CultureInfo) As Object Implements IValueConverter.ConvertBack
            Throw New NotImplementedException()
        End Function
    End Class

The problem is on the Else case (BarChart) when I select None shape. I tried with PointSeries and LineSeries because this is the result I want but as you can see in the attached file "none shape.png", the full green serie is hidden.

Excepected result:

PointSeries: only the points should be visible, no link
LineSeries: the points should be visible and they should be linked by a direct line

Do you know how can I link the points using a direct line (and not the like the StepLineSeries)?

Attached files (here):

shape choice.png: example of shapes choice
line shape.png: example when the Line shape is selected, and the green serie is correctly displayed

Many thanks.

Valentin M.

Chart

updated question on 09 Feb 2023

0 answers

198 views

RadDateTimePicker

Hello,

I created a new template for the RadDateTimePicker because I overrided the Clock Part.

As part of the changes I added a Tooltip which shows the date time if not null. In the Watermark control part of the template I show the SelectedValue property that is bound to the ViewModel - TwoWayBinding. The string format of the DateTime is full date: dd/MM/yyyy with full time: HH:mm:ss. So I see the parsed Text on the control.

I can't find an easy way to show the tooltip in the same format as the display date. I can't set the Tooltio content to RelativeSource Path=SelectedValue because it shows the DateTime in orginal format.

I also can't show in the Tooltio the DisplatText because even if binding OneWay, the date is flickering in every change like binding is wrong.

In the Style of the RadDateTimePicker I have access to SelectedValue, SelectedDateTime,SelectedTime properties but it seems that you convert the Date Time to a text inside the control code because it doesn't work on the Tooltip.

Do you have any solution for that?

DateTimePicker

updated question on 08 Feb 2023

0 answers

196 views

WPF WIndow with RadPropertyGrid and UserControl . FullScreen

Hi,

I have a window that has a RadPropertyGrid and UserControl that contains five buttons. I want to make the screen full while clicking on maximize button. Now as I have fixed height and width. Maximize button is not working. Can you please help me out.

User control :

LayoutControl

PropertyGrid

asked on 06 Feb 2023

1 answer

105 views

Using RadDiagram with Zoom, does text get scaled?

The problem I'm seeing is that text does scale up or down, just sometimes it seems to jump to a large size - is this a feature of RadDiagram? I note that if I set the scale back to 100%, the text is now much bigger. I've attached pictures to demonstrate.

now zoom out:

the text is bigger, to be readable? Now go back to 100%:

the text is now huge.

Diagram

answered on 06 Feb 2023

0 answers

82 views

MaskedNumericInput ComptyContent dosent work with<Value> tag expened

I have this property

private double? _netFreqValue;
public double? NetFreqValue
{
    get => _netFreqValue;
    set
    { 
        if(_netFreqValue == value) return;
        _netFreqValue = value;
        this.OnPropertyChanged();
    }
}

and im trying to set the EmptyContent property to nothing(empty string) when the value is null

this works fine

<RadMaskedNumericInput
    Mask = "#4.3"
    AllowInvalidValues = "False"
    EmptyContent = ""
    UpdateValueEvent = "LostFocus"
    Value = "{Binding NetFreqValue, Mode=TwoWay, UpdateSourceTrigger = PropertyChanged}" />

but this does not

<RadMaskedNumericInput

    Mask = "#4.3"
    AllowInvalidValues = "False"
    EmptyContent = ""
    UpdateValueEvent = "LostFocus">
    <RadMaskedNumericInput.Value>
        <Binding Path=""NetFreqValue"
                         UpdateSourceTrigger="PropertyChanged"
                          Mode="TwoWay">
            <Binding.ValidationRules>
              //some validations
             </Binding.ValidationRules>
        </Binding>
      </RadMaskedNumericInput.Value>
</RadMaskedNumericInput>