Questions on UI for WPF Forum

1 answer

153 views

How can I specify AutomationIDs for Panes, Diagrams, and Nodes created at run-time in a project with MVVM architecture? Is there any example available?

Diagram

answered on 24 Mar 2017

3 answers

393 views

ItemContainerItemContainerStyle Property Breaks RadContextMenu

I am trying to bind a RadContextMenu to dynamic data. For now though I am simply creating three items in the initialization method.

When I run the code WITHOUT having set the ItemContainerStyle in the RadContextMenu, I get a ContextMenu, however the text being displayed is the class name of the item being bound (see attached file for example)

When I insert the ItemContainerStyle in the XAML, nothing is displayed. However, in the "Opened" event of the RadContextMenu, I do see that the menu is "trying" to open yet nothing is ever displayed.

Without ItemContainerStyle, I get a pop-up with the class name of the items.

With ItemContainerStyle, I get nothing.

Here is the code wireup:

XAML in the UserControl where the RadContextMenu is defined:

<telerik:RadContextMenu.ContextMenu>

<telerik:RadContextMenu x:Name="WorkListContextMenu"

ItemsSource="{Binding WorkListContextMenuItems}"

Opened="WorkListContextMenu_Opened">

<telerik:RadContextMenu.ItemContainerStyle>

<Style TargetType="telerik:RadMenuItem">

<Setter Property="Header" Value="{Binding Header}" />

<Setter Property="ItemsSource" Value="{Binding SubItems}" />

<Setter Property="IsEnabled" Value="{Binding IsEnabled}"/>

<Setter Property="IsChecked" Value="{Binding IsChecked}"/>

</Style>

</telerik:RadContextMenu.ItemContainerStyle>

</telerik:RadContextMenu>

</telerik:RadContextMenu.ContextMenu>

When I comment out the "telerik:RadContextMenu.ItemContainerStyle" section, the pop-up appears, but with the classname of the ItemsSource Binding objects.

Not sure what I can do, I've researched for two days now and cannot find the solution. Can someone please offer a suggestion as to what I'm doing wrong?

ContextMenu

answered on 24 Mar 2017

5 answers

598 views

[Solved] RadGridView Row fails to find ancestor on some cases

This is related to the grid's virtualization. The following code demonstrates the problem

View Models and models:

public class MainViewModel : ViewModelBase

{

private ObservableCollection<Person> _persons = new ObservableCollection<Person>();

private DelegateCommand<Person> _deletePersonCommand;

public MainViewModel()

{

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

{

_persons.Add(new Person()

{

FirstName = "Hello" + i,

LastName = "World" + i,

});

}

public ObservableCollection<Person> Persons

{

get

{

return _persons;

}

public DelegateCommand<Person> DeletePersonCommand

{

get

{

if (_deletePersonCommand == null)

{

_deletePersonCommand = new DelegateCommand<Person>(deletePerson);

}

return _deletePersonCommand;

}

private void deletePerson(Person person)

{

_persons.Remove(person);

}

public class Person

{

public string FirstName { get; set; }

public string LastName { get; set; }

}

I have excluded the definition of the Delegate Command. It doesn't matter to this problem, since it will also happen with CallMethodAction, for example...

Here is the XAML:

<Window x:Class="GridViewRowRelativeSourceBug.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="250" Width="525">

<Grid>

<telerik:RadGridView Name="radGridView1" ShowGroupPanel="False" ShowGroupFooters="False" AutoGenerateColumns="False" ItemsSource="{Binding Persons}">

<telerik:RadGridView.Columns>

<telerik:GridViewDataColumn IsReadOnly="True" Header="First Name">

<telerik:GridViewDataColumn.CellTemplate>

<DataTemplate>

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

</DataTemplate>

</telerik:GridViewDataColumn.CellTemplate>

</telerik:GridViewDataColumn>

<telerik:GridViewDataColumn IsReadOnly="True" Header="Last Name">

<telerik:GridViewDataColumn.CellTemplate>

<DataTemplate>

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

</DataTemplate>

</telerik:GridViewDataColumn.CellTemplate>

</telerik:GridViewDataColumn>

<telerik:GridViewDataColumn IsReadOnly="True" Header="Delete" Width="80">

<telerik:GridViewDataColumn.CellTemplate>

<DataTemplate>

<Button Content="Delete Me" Command="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadGridView}, Path=DataContext.DeletePersonCommand}" CommandParameter="{Binding}" />

</DataTemplate>

</telerik:GridViewDataColumn.CellTemplate>

</telerik:GridViewDataColumn>

</telerik:RadGridView.Columns>

</telerik:RadGridView>

</Grid>

</Window>

Please note that instead of having a command for each item, the mainViewModel that contains the items, gets the command and the item to remove as a command parameter.

If you run this example, then there are 2 ways to delete the rows, one will work and the other will fail after deleting about 10 rows

Way #1, deleting from the start

first delete the items from the start, meaning, click on the "Delete Me" button of the first row, now after the first row was deleted, then click the "Delete Me" of the new first row.

You should be able to delete all the rows in that grid.

Way #2, deleting from the end:

Scroll to the end of the grid, and click on the "Delete Me" of the last row. Once it was removed, repeat this procedure for about 10 more times (the number of times is related to the number if rows that fits into the view, and I assume that container recycling is one of the causes to this problem).

You should see that at some point, the "Delete Me" will not do anything, and that the deletePerson function is never called.
In the Output window of Visual Studio you will see:

System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='Telerik.Windows.Controls.RadGridView', AncestorLevel='1''. BindingExpression:Path=DataContext.DeletePersonCommand; DataItem=null; target element is 'Button' (Name=''); target property is 'Command' (type 'ICommand')

I must say that this bug is pretty old, and its weird that no one has reported it yet.

GridView

answered on 24 Mar 2017

1 answer

156 views

InitializeComponent error with RadRibbonWindow

I made the implementation of a RadRibbonWindow as it indicates the article: https://goo.gl/sj1Ank but when making the changes I have errors about the main class project. What could be happening?

RibbonView and RibbonWindow

answered on 23 Mar 2017

5 answers

138 views

Axis advice

We're currently using RadHorizontalDataAxis for a media-scrubber-like application like so.

1.<telerik:RadHorizontalDataAxis x:Name="FrameAxis" Grid.Row="0" Panel.ZIndex="1"

2. Stroke="DarkRed" Foreground="Gray" SizeChanged="FrameAxis_SizeChanged"

3. Minimum="{Binding Path=FirstValue, Source={x:Static local:MyEditorViewModel.Instance}, Mode=OneWay}"

4. Maximum="{Binding Path=Duration, Source={x:Static local:MyEditorViewModel.Instance}, Mode=OneWay}" />

The result looks like the attached image. The mess at the end is because there is a tick mark at 12 and then at 12.00000048877 (the Duration, and a correct value).

1) I'd like the axis to be smarter about ticks marks near the end. In this sample, either only showing 12 or only showing 12.00000048877 would be desirable, but not both. It looks like ChartView.LinearAxis has a SmartLabelsMode property that can do what we want. However, is LinearAxis usable in a loose fashion, that is, without a ChartView? Basic attempts to use it by itself weren't successful.

1) For application-specific purposes, I'd like to have some different stops at the ends. I'd like to see "Start" at the beginning, then 0 followed by some number of other autogenerated ticks, followed by "End" at the end. So, in the example, I'd like to see axis labels of "Start, "0", "4", "8", "12", and "End". This seems like a mixture of categorical labels and smart/data-driven labels. Any options for this?

1) Is there a better axis we should be using?

We don't particularly need a ChartView, but I ask this here since ChartView seems to be where all the axes fall. If there's a better forum in which to ask, please let me know.

ChartView

answered on 23 Mar 2017

1 answer

220 views

Fix Grouping / Fix Sort order on grouping

Hello,

is it possible to have a predefined grouping that the user can not remove? And is it possible to have a fix sort order on that grouping - also not changeable by the user?

Regards,

Raul

GridView

answered on 23 Mar 2017

5 answers

371 views

[Solved] Serialize RadDocking

Hi!

I use RadDocking control to show different content into Tabs (RadPanes). It is necessary to save User settings: RadPanes Headers, order. I realized example from TelerikDemo, but there are two problems:

1. I do not want to save/load Content (PaneProxy from example), i want save only objectType of content;

2. Then i load serialized settings size of tabs very small and can't see Headers.

How can i solve these spoblems.

Docking

answered on 23 Mar 2017

0 answers

109 views

Scrolling is not working properly at all times

Hi,

I have scrolled the GridView to newly added row using the below code, but it works only in odd number of entries like 1, 3, 5 etc. When entering the new item at second and fourth time, its not working as expected. Please let me know some ideas on this.

private void OnGridViewRowEditEnded(object sender, GridViewRowEditEndedEventArgs e)

{

if (e.Row is GridViewNewRow)

{

Dispatcher.BeginInvoke(new Action(() =>

{

if (e.EditedItem != null)

this.AssociatedObject.ScrollIntoView(e.EditedItem);

}), DispatcherPriority.ApplicationIdle);

}

GridView

asked on 23 Mar 2017

3 answers

305 views

[Solved] How to use RadTransitionControl in RadTabControl

Hi Team,

I need to use some transition effects for RadTabControl when the tab selection is changed.I have used the below code in RadTabControl style, but it is not working as expected. Please share any ideas to use transition control in RadTabControl?

<ControlTemplate x:Key="TabControlTemplate" TargetType="telerikNavigation:RadTabControl">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Disabled"/>

<VisualState x:Name="Normal"/>

</VisualStateGroup>

<VisualStateGroup x:Name="DropDownDisplayStates">

<VisualState x:Name="DropDownButtonCollapsed"/>

<VisualState x:Name="DropDownButtonVisible">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownButtonElement" Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="PlacementStates">

<VisualState x:Name="Left">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderDockedElement" Storyboard.TargetProperty="LayoutTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="-90"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="AdditionalContentTransform" Storyboard.TargetProperty="(telerik1:RadDockPanel.Dock)">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Dock>Left</Dock>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownButtonElement" Storyboard.TargetProperty="(telerik1:RadDockPanel.Dock)" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Dock>Left</Dock>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="BorderThickness">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>0 1 1 1</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Right">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderDockedElement" Storyboard.TargetProperty="LayoutTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="90"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="BorderThickness">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>1 1 0 1</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Top"/>

<VisualState x:Name="Bottom">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="BorderThickness">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>1 1 1 0</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderDockedElement" Storyboard.TargetProperty="LayoutTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="180"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="AdditionalContentTransform" Storyboard.TargetProperty="LayoutTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="180"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="AdditionalContentTransform" Storyboard.TargetProperty="(telerik1:RadDockPanel.Dock)">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Dock>Left</Dock>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownButtonElement" Storyboard.TargetProperty="(telerik1:RadDockPanel.Dock)">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Dock>Left</Dock>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<telerik:RadDockPanel LastChildFill="True">

<telerikPrimitives:LayoutTransformControl x:Name="HeaderDockedElement" SnapsToDevicePixels="True" telerik:RadDockPanel.Dock="Top">

<Grid SnapsToDevicePixels="True">

<Border x:Name="HeaderBackground" SnapsToDevicePixels="True" Background="{TemplateBinding HeaderBackground}" Visibility="{TemplateBinding BackgroundVisibility}"/>

<telerik:RadDockPanel Panel.ZIndex="10"

SnapsToDevicePixels="True">

<telerikPrimitives:LayoutTransformControl x:Name="AdditionalContentTransform" Margin="0 4 0 2" telerik1:RadDockPanel.Dock="Right">

<ContentPresenter x:Name="AdditionalContentElement" Content="{TemplateBinding AdditionalContent}"/>

</telerikPrimitives:LayoutTransformControl>

<ToggleButton x:Name="DropDownButtonElement"

Visibility="Collapsed"

telerik1:RadDockPanel.Dock="Right"

Style="{TemplateBinding DropDownButtonStyle}"

ClickMode="Press"

IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">

<telerikNavigation:RadContextMenu.ContextMenu>

<telerikTabControl:DropDownMenu x:Name="DropDownMenuElement"

StaysOpen="False"

Placement="Bottom"

Style="{TemplateBinding DropDownStyle}"

ItemTemplate="{TemplateBinding ItemDropDownContentTemplate}"

ItemTemplateSelector="{TemplateBinding ItemDropDownContentTemplateSelector}"

DisplayMemberPath="{TemplateBinding DropDownDisplayMemberPath}"/>

</telerikNavigation:RadContextMenu.ContextMenu>

</ToggleButton>

<RepeatButton x:Name="LeftScrollButtonElement" Margin="4 4 2 2"/>

<RepeatButton x:Name="RightScrollButtonElement" telerik:RadDockPanel.Dock="Right" RenderTransformOrigin="0.5 0.5" Margin="2 4 0 2">

<RepeatButton.RenderTransform>

<ScaleTransform ScaleX="-1"/>

</RepeatButton.RenderTransform>

</RepeatButton>

<Grid>

<ScrollViewer x:Name="ScrollViewerElement"

VerticalScrollBarVisibility="Disabled"

BorderThickness="0"

IsTabStop="False"

HorizontalScrollBarVisibility="{Binding (ScrollViewer.HorizontalScrollBarVisibility), RelativeSource={RelativeSource TemplatedParent}}">

<ItemsPresenter/>

</ScrollViewer>

</Grid>

</telerik:RadDockPanel>

</Grid>

</telerikPrimitives:LayoutTransformControl>

<Border x:Name="ContentBorder"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness, Mode=TwoWay}"

Background="{TemplateBinding Background}"

Padding="{TemplateBinding Padding}">

<Grid>

<telerik:RadTransitionControl x:Name="ContentElement"

Visibility=

"{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved,Converter={StaticResource InvertBoolToVisConverter}}"

ContentTemplate="{TemplateBinding SelectedContentTemplate}"

ContentTemplateSelector="{TemplateBinding SelectedContentTemplateSelector}">

<telerik:RadTransitionControl.Transition>

<telerikTransitions:FadeTransition />

</telerik:RadTransitionControl.Transition>

</telerik:RadTransitionControl>

<Grid x:Name="ContentElementsPanel"

Visibility=

"{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved, Converter={StaticResource BoolToVisConverter}}"

/>

</Grid>

</Border>

</telerik:RadDockPanel>

</Grid>

</ControlTemplate>

Regards,

Antony

TransitionControl

answered on 23 Mar 2017

0 answers

175 views

Binding a Grid column from a local variable.

I have a Telerik grid, and have following columns, that are binding with a data source

<telerik:RadGridView.Columns>
<telerik:GridViewDataColumn Width="Auto" UniqueName="Id" Header="Id" DataMemberBinding="{Binding Id}"/>
<telerik:GridViewDataColumn Width="Auto" UniqueName="Name" Header="Name" DataMemberBinding="{Binding Name}"/>
<telerik:GridViewDataColumn Width="Auto" UniqueName="State" Header="State" DataMemberBinding="{Binding State}"/>
<telerik:GridViewDataColumn Width="Auto" UniqueName="Status" Header="Status" DataMemberBinding="{Binding localvariable}" "/>
</telerik:RadGridView.Columns>

GridView

asked on 22 Mar 2017