Questions on UI for WPF Forum

1 answer

306 views

WPF / XAML : Several needs about RadGridView row and header styling.

Hi all,

First my view was working with a simple DataGrid. then cutomer asked to have merge cell (MergedCellsDirection=vertical) for some column.
I changed to a RadGridView.

I readed that I can re-use standard template to style the RadGridView, principaly the GridViewRow but i did not found what I needed.

Here the list of points that i want to achieve. (Code Below)

HEADER :

(1) I have disabled the square on the left-top corner, I still have one white pixel left to the first column header.

(2) I have disabled the roll over effect on the header, and I have a rectangle arround the header column label. (Want the header column not clickable)

(3) I want to remove the filtering Icon

ROW :

(4) Same as header, white pixel on left

(5) Dont want row to be selectable

(6) I use MergedCellsDirection="Vertical" (see Cal ID column), and I want a dotted separation between the line.
My code worked with a DataGrid first, then i try to migrate to GridViewRow style .. without success. The cell value doesnt not appear. (the content)

Before (with a RadGrid), the content was displayed with => see style RadGridViewRow_Standard

<DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>

In advance, Many thanks for your help !

XAML:

<telerik:RadGridView x:Name="GridCalibrators" 
                              
                            BorderBrush="{x:Null}" 
                            BorderThickness="0"
                            AutoGenerateColumns="False"
                            IsReadOnly="True" 
                            CanUserSelect="False"
                            GridLinesVisibility="None" 
                            CanUserReorderColumns="False" 
                            CanUserSortColumns="False" 
                            Background="White"  
                            CanUserSelectColumns="False"
                            ShowGroupPanel="False"        
                            CanUserDeleteRows="False"  
                            CanUserResizeColumns="False" 
                            CanUserResizeRows="False"  
                            RowIndicatorVisibility="Collapsed" 
                            CanUserFreezeColumns="False" 
                            ShowSearchPanel="False"
                            ShowColumnSortIndexes="False"
                            MergedCellsDirection="Vertical"
                            GroupRenderMode="Flat"
                            CanUserSearch="False"
                            CanUserSortGroups="False"
                            HeaderRowStyle="{StaticResource RadGridViewColumnHeaderStyle}"
                            RowStyle="{StaticResource RadGridViewRow_Standard}"
                            Grid.Row="0"
                            >
                        <!--RowStyle="{StaticResource RadGridViewRow_Standard}"-->
                        <telerik:RadGridView.OpacityMask>
                            <VisualBrush Visual="{Binding ElementName=BDRoundedCalibrators}"/>
                        </telerik:RadGridView.OpacityMask>
                        <telerik:RadGridView.Resources>
                            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FFFFFF"/>
                            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="#5D6467"/>
                            <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="#FFFFFF"/>
                            <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}" Color="#5D6467"/>
                        </telerik:RadGridView.Resources>
                        <telerik:RadGridView.Columns>
                            
                            <!-- Status -->
                            <telerik:GridViewDataColumn Header="Status" Width="175" 
                                                        HeaderCellStyle="{StaticResource RadGridViewHeaderCellStyle}" 
                                                        DataMemberBinding="{Binding WellStatus}"
                                                        IsCellMergingEnabled="False">
                                <telerik:GridViewDataColumn.CellTemplate>
                                    <DataTemplate>
                                        <StackPanel Grid.Column="0" Orientation="Horizontal" VerticalAlignment="Center" >
                                            <Image x:Name="IconStatus" Height="37" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="10,0,0,0">
                                                <Image.Style>
                                                    <Style TargetType="{x:Type Image}">
                                                        <Style.Triggers>
                                                            <DataTrigger Value="Completed" Binding="{Binding WellStatus}">
                                                                <Setter Property="Source" Value="{StaticResource AssayApproval_IconCompleted}"/>
                                                            </DataTrigger>
                                                            <DataTrigger Value="Processing" Binding="{Binding WellStatus}">
                                                                <Setter Property="Source" Value="{StaticResource AssayApproval_IconProcessing}"/>
                                                            </DataTrigger>
                                                            <DataTrigger Value="Aborted" Binding="{Binding WellStatus}">
                                                                <Setter Property="Source" Value="{StaticResource AssayApproval_IconAborted}"/>
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </Image.Style>
                                            </Image>
                                            <TextBlock Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0" Text="{Binding WellStatus}"/>
                                        </StackPanel>
                                    </DataTemplate>
                                </telerik:GridViewDataColumn.CellTemplate>
                            </telerik:GridViewDataColumn>

                            <telerik:GridViewPinRowColumn MinWidth="0" Width="1" HeaderCellStyle="{StaticResource RadGridViewColumnSeparatorStyle}" />

                            <!--PlateSerialNumber-->
                            <telerik:GridViewDataColumn  Header="Plate serial number" Width="108" 
                                                         HeaderCellStyle="{StaticResource RadGridViewHeaderCellStyle}" 
                                                         DataMemberBinding="{Binding PlateBarcode}"
                                                         IsCellMergingEnabled="False"/>

                            <telerik:GridViewPinRowColumn MinWidth="0" Width="1" HeaderCellStyle="{StaticResource RadGridViewColumnSeparatorStyle}" />

                            <telerik:GridViewDataColumn  Header="Position" Width="150" 
                                                         HeaderCellStyle="{StaticResource RadGridViewHeaderCellStyle}" 
                                                         DataMemberBinding="{Binding Position}"
                                                         IsCellMergingEnabled="False"/>

..... (only the first columns)

Style file :

    <Style x:Key="RadGridViewColumnSeparatorStyle" TargetType="{x:Type telerik:GridViewHeaderCell}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Fill="White" Height="45"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="BorderThickness" Value="0 0 0 0"/>
    </Style>
    
    <Style  x:Key="RadGridViewHeaderCellStyle" TargetType="{x:Type telerik:GridViewHeaderCell}">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="HorizontalAlignment" Value="Left"></Setter>
        <Setter Property="VerticalAlignment" Value="Center"></Setter>
        <Setter Property="VerticalContentAlignment" Value="Center"></Setter>
        <Setter Property="BorderThickness" Value="0 0 0 0"/>
        <Setter Property="IsHitTestVisible" Value="False"/>
    </Style>

    <Style x:Key="RadGridViewColumnHeaderStyle" TargetType="{x:Type telerik:GridViewHeaderRow}">
        <Setter Property="Background" Value="{StaticResource Zentech_DarkGray}"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="TextElement.FontFamily" Value="{StaticResource PrimaryFont}"/>
        <Setter Property="TextElement.FontSize" Value="16pt"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="Height" Value="55"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderThickness" Value="0 0 0 0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Margin" Value="0"/>
    </Style>

    <Style x:Key="RadGridViewRow_Standard" TargetType="{x:Type telerik:GridViewRow}" >
        <Setter Property="Background" Value="White"/>
        <Setter Property="Foreground" Value="{StaticResource Zentech_DarkGray}"/>
        <Setter Property="TextElement.FontFamily" Value="{StaticResource PrimaryFont}"/>
        <Setter Property="TextElement.FontSize" Value="16pt"/>
        <Setter Property="Height" Value="65"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <!--<Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:GridViewRow}">
                    <Border x:Name="DGR_Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 
                            Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                        <SelectiveScrollingGrid>
                            <SelectiveScrollingGrid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                            </SelectiveScrollingGrid.ColumnDefinitions>
                            <SelectiveScrollingGrid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </SelectiveScrollingGrid.RowDefinitions>
                            <DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            
                            <ContentPresenter Grid.Column="1" Content="{TemplateBinding Content}"/>
                            <Path Grid.Row="2" Grid.ColumnSpan="2"
                                      Data="M0,0.5 L1,0.5"
                                      Stretch="Fill" Stroke="{StaticResource Zentech_DarkGray}" StrokeThickness="1"
                                      StrokeDashArray="1.0 4.0"/>
                        </SelectiveScrollingGrid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>-->
    </Style>

GridView

Styling

answered on 06 Sep 2021

1 answer

321 views

Chart horizontal scrollbar without zooming and fixied barseries width

Hello,

I find some problem when displaying lot of datapoints. What I try to achieve is define a constant width for each series and allow scrolling in horizontal axis. We try it but looks as horizontal scrollbar only is activated if zoom is sets. We want to keep bar series at fixed size and scroll it.

On the attached images you can see how it looks now our charts. Our desired behaviours it´s to get this problem solved for charts with categories but same issue it´s happens without categories.

The behaviour we want to achieve is like we have a infinite canvas a just move. (Look desired.jpgto find a sketch)

Is there any option to configure it properly?

Thanks!

Chart

answered on 03 Sep 2021

1 answer

283 views

WPF Autocomplete with API Call

Is it possible to use the Telerik Autocomplete controls but have the data come from a cloud API call?

AutoCompleteBox

AutoSuggestBox

answered on 03 Sep 2021

1 answer

334 views

Modify RadAutoCompleteBox DropDownItemTemplate or styles

I need to remove all Telerik styling. I've downloaded source code and replaced all templates and styles but the orange color persists.

Inside the RadAutoCompleteBox I see a RadListBox named PART_ListBox which has a DropDownItemTemplate. I can't figure out how to utilize this. Here's an example:

<Border Background="White" BorderBrush="White">
   <TextBlock Background="White" Foreground="Black" Text="{Binding}" />
   <Border.Resources>
      <SolidColorBrush x:Key="ControlOuterBorder_Highlighted" Color="LightGray" />
      <SolidColorBrush x:Key="ControlInnerBorder_Highlighted" Color="LightGray" />
      <SolidColorBrush x:Key="ControlBackground_Highlighted" Color="#F6F6F6" />
      <SolidColorBrush x:Key="ControlSubItem_OuterBorder_Selected" Color="#F6F6F6" />
      <SolidColorBrush x:Key="ControlSubItem_InnerBorder_Selected" Color="#F6F6F6" />
      <SolidColorBrush x:Key="ControlSubItem_Background_Selected" Color="#F6F6F6" />
      <SolidColorBrush x:Key="ControlOuterBorder_Focused" Color="#F6F6F6" />
   </Border.Resources>
</Border>

Issues:

1. TextBlock still has an orange border on hover. I tried adding all the resources I could find in the Telerik source code to hopefully override this. No luck.

2. The text displays the class name. The {Binding} is calling ToString() on the class. I need to display the DisplayMemberPath. I can't do {Binding Name} because I have dozens of classes that could go in here.

AutoCompleteBox

ListBox

answered on 03 Sep 2021

1 answer

1.1K+ views

Get default theme based forground for custom control

Hello,

i had a custom user control which i use in a GridView Column. The foreground should change by a binded value and a IValueConverter. The "Bad" state is red and the normal state is the default theme color.

The result should look like this (But it does only with a dirty hack -> use 2 idendical textblock and hide one or the other):

BUT i dont know how to get the default foreground (yellow unselected and white selected)

I tried:

return null in the IValueConverter -> No Color/Brush at all
Use a Multibinding and return the given second Binding: <Binding Source="{x:Static telerik:CrystalPalette.Palette}" Path="MarkerColor"/> -> Select state is not respected
Use a Multibinding to a "Helper" Element and return the value <Binding ElementName="ColorHelper" Path="Foreground"/>
<TextBlock Name="ColorHelper" Foreground="{telerik:CrystalResource ResourceKey={x:Static telerik:CrystalResourceKey.MarkerBrush}}"> </TextBlock> -> Select state is not respected

GridView

answered on 02 Sep 2021

1 answer

148 views

change RadPane default ContextAMenu

Dear sir,

RadPane gives as a default ContextMenu while pressing on the header .

The Context menu contains the option of Hide.

Our customers can't make this RasPane visibly again, therefore for them it's act like delete.

how can we change the Text inside this default ContextMenu from Hide to Delete?

thank you

yafit

Docking

answered on 01 Sep 2021

1 answer

110 views

Transform RadDocumentHost content in control

Hi,

I have a dynamic structure managed with RadDocking, that works well.

<t:RadDocking x:Name="radDocking1"
                            RetainPaneSizeMode="DockingAndFloating"
                            CanAutoHideAreaExceedScreen="True"
                            Grid.Row="1" Margin="0 0 0 10"                            
                            BorderThickness="0"
							CloseButtonPosition="InPane"
                            Padding="0"
							Close="radDocking1_Close">
				<t:RadDocking.DocumentHost>
					<t:RadSplitContainer >
						<t:RadPaneGroup x:Name="_tabPlot" 
									SelectedIndex="{Binding TabAttivo}">
							<t:RadPaneGroup.Resources>
								<DataTemplate x:Uid="DataTemplate_1" 
										  x:Key="{x:Static r:ResourcesKeys.TabContent}" DataType="WpfPlot">
									<t:RadDocking RetainPaneSizeMode="DockingAndFloating" DataContext="{Binding}"
											  Background="{Binding IsSampled, Converter={StaticResource SampledToColor}}">
										<t:RadDocking.DocumentHost>
...

But it was too complex and I transformed the part inside the more extern DocumentHost in a user control.

<UserControl x:Class="DeltaOhm.NsModules.View.MainPlotControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:DeltaOhm.NsModules.View"
			 xmlns:r="clr-namespace:DeltaOhm.NsModules.ResourceDictionaries"
		     xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
			 xmlns:t="http://schemas.telerik.com/2008/xaml/presentation"
			 xmlns:vm="clr-namespace:DeltaOhm.NsModules.ViewModel" 
			 d:DataContext="{d:DesignInstance Type=vm:MainWindowViewModel}"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">

	
	<t:RadSplitContainer x:Name="_mainContainer" >
		<t:RadPaneGroup>
			<t:RadPaneGroup x:Name="_tabPlot" 
						SelectedIndex="{Binding TabAttivo}">
				<t:RadPaneGroup.Resources>
					<DataTemplate x:Key="{x:Static r:ResourcesKeys.TabContent}" DataType="WpfPlot">
						<t:RadDocking RetainPaneSizeMode="DockingAndFloating" DataContext="{Binding}"
											  Background="{Binding IsSampled, Converter={StaticResource SampledToColor}}">
							<t:RadDocking.DocumentHost>

Now, I tried many combinations of radsplitcontainer/RadPaneGroup in and out of user control, but the best that I get was :

<UserControl x:Class="DeltaOhm.NsModules.View.MainPlotControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:DeltaOhm.NsModules.View"
			 xmlns:r="clr-namespace:DeltaOhm.NsModules.ResourceDictionaries"
		     xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
			 xmlns:t="http://schemas.telerik.com/2008/xaml/presentation"
			 xmlns:vm="clr-namespace:DeltaOhm.NsModules.ViewModel" 
			 d:DataContext="{d:DesignInstance Type=vm:MainWindowViewModel}"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">

	
	<Grid>
		<t:RadSplitContainer x:Name="_mainContainer" >
				<t:RadPaneGroup x:Name="_tabPlot" 
						SelectedIndex="{Binding TabAttivo}">
				<t:RadPaneGroup.Resources>
					<DataTemplate x:Key="{x:Static r:ResourcesKeys.TabContent}" DataType="WpfPlot">
						<t:RadDocking RetainPaneSizeMode="DockingAndFloating" DataContext="{Binding}"
											  Background="{Binding IsSampled, Converter={StaticResource SampledToColor}}">
							<t:RadDocking.DocumentHost>
								<t:RadDocking >

And in the original position:

<t:RadDocking.DocumentHost>
						<Grid><local:MainPlotControl x:Name="_mainPlot"/></Grid>
				</t:RadDocking.DocumentHost>

The result is similar but not identical

vs

I would like to follow this way to split the code, but i would like to get the second layout, are there any solutions?

Thank you in advance

Luigi

Docking

TabControl

answered on 01 Sep 2021

1 answer

128 views

RadGridView ItemsSource being updated in ViewModel (Using Dispatch) but Grid is still not updating.

I'm using MVVM and I'm trying to show a grid that has an ItemsSource of an IList<object>. THe IList object does ... eventually ... empoly a base model that uses INotifyPropertyChanged so any change SHOULD be bubbling to the surface.

This IList is updated and modified in the ViewModel and I guessed it was on a different Thread, after some research, so I tried using the Dispatcher in order to have it trigger any updates. But still nothign in the GUI is changing.

The list is updating async but then the Grid is never showing the changes.

Any ideas would be greatly appreciated.

EntityFrameworkCoreDataSource (.Net Core)

GridView

answered on 01 Sep 2021

2 answers

235 views

Performance issue

Hi,

i tried out the "Appointment Template" wpf Example. Is there a way to get a better performance. It's loading a long time?

Thanks

regards

rene

ScheduleView

answered on 01 Sep 2021

1 answer

170 views

GridView Excel Exporting

We are working on implementing exporting to Excel in our application's radgridview - we used this tutorial: https://docs.telerik.com/devtools/wpf/controls/radgridview/export/generic/export and it works with some errors.

When trying to create a file with an .xls file extension, we get an error of "The format and extension of this file do not match". How do we fix this?

When saving, the file extension appears twice after the "Excel files" in the save dialog. Why is this? Is this potentially causing issues?

Also, we would like to change the formatting of the file on export - for example, freezing the headers, automatically setting the column widths, etc - what is the best way to set these properties?

GridView

answered on 31 Aug 2021