Questions on UI for WPF Forum

133 answers

921 views

Latest online resources for UI for WPF

RadCalendar:

How to Customize the Calendar Buttons - This help topic explains how to apply different Style to some buttons in the Calendar using StyleSelector.

RadDiagram:

Create custom shapes in the RadDiagram with MVVM - The forum thread elaborates on how to create custom shapes in the RadDiagram following an MVVM approach.
Populate the RadDiagramToolbox with custom business data - In this forum thread you can find a sample solution and guidelines on how to populate the RadDiagramToolbox with custom business data and based on the data type drop different objects on the diagramming surface. The attached solution also demonstrates an approach for providing custom information in a SettingsPane tab.

RadGridView:

Unfocused state for the selected GridViewRow - With Q2 2012 we have introduced a new Unfocused state for the selected GridViewRow. It will be shown when the GridView is out of focus. If you want to revert to the previous behavior you can check this help article.

RadPivotGrid:

Saving and loading the state of the LocalDataSourceProvider - In this forum you will find example how to save the current state of RadPivotGrid and when you restart your application, to load it again from this state
How to edit the ControlTemplate of RadPivotFieldList and filter some of its public properties - In this forum you will find useful information how to edit the ControlTemplate of RadPivotFieldList and also how to filter some of the public properties that you do not want to show in RadPivotFieldList

RadRichTextBox:

Guidelines for Printing with RadDocument - As RadDocument is sometimes used independently of RadRichTextBox to layout content and export it, this article explains the basics of creating a document programmatically.

General Discussions

answered on 23 Feb 2018

1 answer

8 views

How to add unusable area inside RadDocking but place a usable button in that area

I have a RadDocking element in my xaml. I need to add one main button that opens and closes the main menu above the RadDocking element.

The problem is, the RadPane-s that open inside the RadDocking element would go below the button and the title of a given RadPane is hidden.

I want my main button to be above the RadDocking element, but the header/title of all the panes should be at all time visible and not hidden by the button.

I was wondering, can there be some constrained area inside RadDocking tag where RadPanes would not go or cover, so I can place my button above the RadDocking in that area?

Seems a bit non-sense but there has to be a way.

Should I use conditional docking? But how would that work, mark each new pane with a tag and then choose HeaderTemplate with HeaderTemplateSelector whether to add or not, space to the left in the RadPane header?

EDIT:

I maybe need some polygon-like container element that supports direct content. I need to be able to dock on right and below the button but panes should not go below the button and hide their title.

Check attached image.

Here is my modified ControlTemplate:

<ControlTemplate x:Key="RadDockingControlTemplate" TargetType="tk:RadDocking">
                <Grid x:Name="Root">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <Button Width="80" Height="36" Content="Text" Grid.Column="0" Grid.Row="0"/>

                    <Border
                        Grid.Row="0"
                        Grid.Column="1"
                        Grid.RowSpan="2"
                        x:Name="Border"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}">
                        <tk:RadDockPanel x:Name="RootDockPanel">
                            <dock:AutoHideArea x:Name="LeftAutoHide" tk:RadDockPanel.Dock="Left" TabStripPlacement="Left" BackgroundVisibility="Collapsed" TabOrientation="Vertical"/>
                            <dock:AutoHideArea x:Name="RightAutoHide" tk:RadDockPanel.Dock="Right" TabStripPlacement="Right" BackgroundVisibility="Collapsed" TabOrientation="Vertical"/>
                            <dock:AutoHideArea x:Name="TopAutoHide" tk:RadDockPanel.Dock="Top" TabStripPlacement="Top" BackgroundVisibility="Collapsed" TabOrientation="Horizontal"/>
                            <dock:AutoHideArea x:Name="BottomAutoHide" tk:RadDockPanel.Dock="Bottom" TabStripPlacement="Bottom" BackgroundVisibility="Collapsed" TabOrientation="Horizontal"/>
                            <tk:DockingPanel x:Name="ContentDockPanel" Margin="0">
                                <dock:DocumentHost x:Name="DocumentHost" IsTabStop="{TemplateBinding IsTabStop}"/>
                            </tk:DockingPanel>
                        </tk:RadDockPanel>
                    </Border>
                </Grid>
            </ControlTemplate>

Docking

updated question on 10 May 2021

0 answers

2 views

RadTreeView lines

Hello
How to remove the visibility of lines in specific nodes of a RadTreeView(not root)

TreeView

updated question on 10 May 2021

0 answers

3 views

Connect the dots between

Is it possible to connect the dots on the attached image?

I have a chart where the x-axis is time span and the y-axis is double.

On the x-axis I want to show every hour between the stating time span 0h 0 min to the ending time span 23h 59min.

So what I have done is to create a list with all y-axis datapoints and all steps of the x-axis.

Where there are no datapoints on the y-axis I set the double to NaN.

So what I want is to draw a line between the values that are not set to NaN. Or ofcourse if there is another way to resolve this.

Items = new List<CurveItPlotInfo>();

            for (int i = 0; i < 23; i++)
            {
                if (vats.Any(x => x.Time.Hours == i))
                {
                    foreach (var item in vats.Where(x => x.Time.Hours == i))
                    {
                        Items.Add(new CurveItPlotInfo
                        {
                            TimeSpanValue = item.Time,
                            Value = ConvertToDouble(item.Value),
                        });
                    }
                }
                else if (i == 23)
                {
                    Items.Add(new CurveItPlotInfo
                    {
                        TimeSpanValue = TimeSpan.FromMinutes(1439),
                        Value = Double.NaN, 
                    });                
                }
                else
                {
                    Items.Add(new CurveItPlotInfo
                    {
                        TimeSpanValue = TimeSpan.FromHours(i),
                        Value = Double.NaN, 
                    }); ;
                }
            }
 
public class CurveItPlotInfo : ViewModelBase
    {

        private double value;
        private TimeSpan timeSpanValue;

        public double Value
        {
            get { return value; }
            set { SetProperty(ref this.value, value); }
        }

        public TimeSpan TimeSpanValue { get => timeSpanValue; set { SetProperty(ref timeSpanValue, value); } }

    }

<telerik:RadCartesianChart x:Name="CurveItChart" 
                                   Loaded="CurveIt_Loaded"
                                   Grid.Row="0">
            
            <telerik:RadCartesianChart.SmartLabelsStrategy>
                <telerik:ChartSmartLabelsStrategy />
            </telerik:RadCartesianChart.SmartLabelsStrategy>
            
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis x:Name="verticalAxis" Minimum="{Binding MinValue}" Maximum="{Binding MaxValue}" />
            </telerik:RadCartesianChart.VerticalAxis>
            
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeCategoricalAxis x:Name="datetimeAxis" 
                                                 SmartLabelsMode="SmartStep"
                                                 MajorTickLength="15"
                                                 PlotMode="OnTicksPadded">
                    <telerik:DateTimeCategoricalAxis.LabelTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Converter={converters:TimeSpanFormatConverter}}" />
                        </DataTemplate>
                    </telerik:DateTimeCategoricalAxis.LabelTemplate>
                </telerik:DateTimeCategoricalAxis>
            </telerik:RadCartesianChart.HorizontalAxis>
            
            <telerik:RadCartesianChart.Series>
                <telerik:LineSeries ValueBinding="Value" CategoryBinding="TimeSpanValue" ItemsSource="{Binding Items}">

                    <telerik:LineSeries.PointTemplate>
                        <DataTemplate>
                            <Border BorderBrush="AliceBlue" BorderThickness="1" >
                                <Rectangle Width="15" Height="15" Fill="Black"
                                           MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" />
                            </Border>
                        </DataTemplate>
                    </telerik:LineSeries.PointTemplate>

                </telerik:LineSeries>
                
            </telerik:RadCartesianChart.Series>
            
        </telerik:RadCartesianChart>

Chart

ChartView

updated question on 10 May 2021

0 answers

2 views

RadPathButton and ContentTemplateSelector

Hello,

I am using the ContentTemplateSelector-Property of the RadPathButton, but nothing happens. Is there some trick to activate this feature?

My xaml:

        <utils:MessageDirectionTemplateSelector x:Key="messageDirectionTemplateSelector">
            <utils:MessageDirectionTemplateSelector.DecEditDataTemplate>
                <DataTemplate>
                    <ContentControl ContentTemplate="{StaticResource icon:outMessage}"/>
                </DataTemplate>
            </utils:MessageDirectionTemplateSelector.DecEditDataTemplate>
            <utils:MessageDirectionTemplateSelector.HexEditDataTemplate>
                <DataTemplate>
                    <ContentControl ContentTemplate="{StaticResource icon:inMessage}"/>
                </DataTemplate>
            </utils:MessageDirectionTemplateSelector.HexEditDataTemplate>
        </utils:MessageDirectionTemplateSelector>


<telerik:RadPathButton Content="{Binding DataContext, RelativeSource={RelativeSource Self}}"
                                       ContentPlacement="Right"
                                       ContentTemplateSelector="{StaticResource messageDirectionTemplateSelector}"/>

The Selector-Class:

public class MessageDirectionTemplateSelector : DataTemplateSelector
{
	public override DataTemplate SelectTemplate(object item, DependencyObject container)
	{
		if (item is MessageItem)
		{
			return Properties.Settings.Default.CanIdHex ? HexEditDataTemplate : DecEditDataTemplate;
		}

		if (item is MessageSignalItem)
		{
			return Properties.Settings.Default.MuxValueHex ? HexEditDataTemplate : DecEditDataTemplate;
		}

		if (item is EnumValueItem)
		{
			return Properties.Settings.Default.EnumValueHex ? HexEditDataTemplate : DecEditDataTemplate;
		}
		return null;
	}
	public DataTemplate HexEditDataTemplate { get; set; }
	public DataTemplate DecEditDataTemplate { get; set; }
}

regards,

Tobias

Buttons

updated question on 10 May 2021

0 answers

2 views

Virtual Grid : How to set the background to each row different.

Hello

I have to need to set the background to each row different way also based on some property value changes, I need to change the background of the row as well runtime. I have attached the screenshot, I want a similar row and cell background also those brush values can be changed runtime.

Can someone guide me on how can I achieve this without affecting the performance much?

Thanks in advance.

Parthiv

VirtualGrid

asked on 10 May 2021

3 answers

6 views

Calculate closest previous point in chart

Hi,

I have a step line chart with the trackball enabled. The ChartTrackBallBehavior is like this.

<telerik:ChartTrackBallBehavior ShowIntersectionPoints="True" ShowTrackInfo="True" SnapMode="None" SnapSinglePointPerSeries="True"/>

My problem is that the closest point can be on the left or on the right of the trackball line. I need the closest point to be always the one on the left. Is there a way to change the default behavior so that I can programmatically set the closest point when trackball line moves? I have attached an image to better explain my problem.

ChartView

answered on 10 May 2021

0 answers

2 views

Mail Merge Format Fail

Hello,

I have a Word document in docx format and mail merge with Excel in xls format.

The following are mergefields that rendered properly in Word but not when I do mail merge in my code.

{ MERGEFIELD TODAY \@ “MM/dd/yy” }

{ MERGEFIELD BAL \# ####,0.00 }

The following code:

                    using (Stream stream = new FileStream(docxPath +docxFilename, FileMode.Open))
                    {
                        stream.Seek(0, SeekOrigin.Begin);
                        byte[] bytes = new byte[stream.Length];
                        stream.Read(bytes, 0, bytes.Length);

                        templateDocument = new DocxFormatProvider().Import(bytes);
                        IEnumerable mailMergeSource = this.GetMailMergeDataSource(worksheet);
                        mergeDocument = templateDocument.MailMerge(mailMergeSource);
                        this.SaveFile(mergeDocument);
                    }

Above is the main code that do mailmerge

The GetMailMergeDataSource is give below:

        private IEnumerable GetMailMergeDataSource(Worksheet worksheet)
        {
            List<DynamicDataObject> mailMergeSource = new List<DynamicDataObject>();
            string[] fieldNames = new string[worksheet.UsedCellRange.ColumnCount];
            int columnCount;
            int rowCount;
            CellSelection selection;

            for (columnCount = 0; columnCount < worksheet.UsedCellRange.ColumnCount; columnCount++)
            {
                selection = worksheet.Cells[0, columnCount];
                fieldNames[columnCount] = selection.GetValue().Value.RawValue.ToString();
            }

            for (rowCount = 1; rowCount < worksheet.UsedCellRange.RowCount; rowCount++)
            { 
                DynamicDataObject data = new DynamicDataObject();
                for (columnCount = 0; columnCount < worksheet.UsedCellRange.ColumnCount; columnCount++)
                {
                    selection = worksheet.Cells[rowCount, columnCount];
                    data.Set(fieldNames[columnCount], selection.GetValue().Value.RawValue);
                }

                if (columnCount > 0)
                    mailMergeSource.Add(data);
            }

            return mailMergeSource;
        }

DynamicDataaObject is derived from Telerik own's sample document-processing-sdk-master > WordsProcessing

the SaveFile is below:

        private void SaveFile(RadFlowDocument document)
        {
            using (Stream stream = File.OpenWrite(newDocxPath + newDocxFilename))
            {
                DocxFormatProvider formatProvider = new DocxFormatProvider();

                DocxExportSettings exportSettings = new DocxExportSettings
                {
                    AutoUpdateFields = true,
                    InvalidDocumentAction = InvalidDocumentAction.ThrowException
                };
                formatProvider.ExportSettings = exportSettings;
                formatProvider.Export(document, stream);

            }


        }

It works. It merged into another docx document but the Merge Field format failed. But to do the same with Word merge, the resulting file shows proper format.

Let me know if you need full working sample that demo the problem.

Thank,

General Discussions

asked on 09 May 2021

0 answers

2 views

SnapMode=ClosestPoint on ScatterPointSeries shows multiple points

Hi,

I have a scatter point series with chart track ball enabled and SnapMode set to ClosestPoint, but with multiple series added to the chart I see a point per series.

Each colour in above image is a separate series added from code. The chart itself is in XAML.

                    <telerik:RadCartesianChart Grid.Row="0"   BorderBrush="Transparent" Background="White"  x:Name="radChartView" HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" DockPanel.Dock="Top">
                        <telerik:RadCartesianChart.Behaviors>
                            <telerik:ChartTrackBallBehavior ShowIntersectionPoints="True" ShowTrackInfo="False" SnapMode="ClosestPoint" />
                        </telerik:RadCartesianChart.Behaviors>
                        <telerik:RadCartesianChart.TrackBallLineStyle>
                            <Style TargetType="Polyline">
                                <Setter Property="Visibility" Value="Collapsed" />
                            </Style>
                        </telerik:RadCartesianChart.TrackBallLineStyle>

                    </telerik:RadCartesianChart>

I've only seen examples of SnapMode=ClosestPoint on LineSeries plots. Should this work on ScatterPointSeries?

Thanks,

Neil

Chart

asked on 09 May 2021

0 answers

3 views

Adding bezier curves to make large diagrams readable

I've used telerik rad diagram for creating a kind of blue-print system (flow system). In this flow-system we have a lot of nodes and connections. Is it possible to show connections like this?

At the moment it looks like this:

I've tried to work with the bezier-connection-type, but that didn't work as expected:

Thanks a lot!

Diagram

asked on 09 May 2021