Questions on UI for WPF Forum

0 answers

112 views

Change RadCalendar Date/Month on RadScheduleView Navigation click

Hello,

Struggling to get the selected date from Navigation header when we click on that.

And in the same way when i click Previous(Back) and Tomorrow(front) Arrow key, need to get the details, please help me to get it resolve.

Attached an screenshot for your reference.

ScheduleView

asked on 08 Jun 2016

2 answers

128 views

How to get the parent Diagram of a RadDiagramShape in code?

How can I get the parent Diagram of a RadDiagramShape in code?

There is a "Diagram" property but it's protected and can't be accessed.

Diagram

answered on 07 Jun 2016

4 answers

460 views

add shapes in MVVM

Hello,

I'm using a RadDiagram in my application. The GraphSource is backed by a ViewModel.

I need to draw shapes on the diagram, and have them added to the GraphSource. How can I achieve that?

I created a small test project, below. It has a window and a View Model.

At present, when I draw a path, new MyBaseNode object is created, but none of its properties have a value.

01.<Window x:Class="MainWindow"

02. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

03. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

04. xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

05. xmlns:primitives="clr-namespace:Telerik.Windows.Controls.Diagrams.Primitives;assembly=Telerik.Windows.Controls.Diagrams"

06. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

07. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

08. xmlns:my="clr-namespace:MvvmShapes"

09. mc:Ignorable="d"

10. Title="MainWindow"

11. d:DesignWidth="800"

12. d:DesignHeight="300"

13. Height="350"

14. Width="525">

15. <Window.DataContext>

16. <my:MyViewModel />

17. </Window.DataContext>

18. <Grid>

19. <telerik:RadDiagram GraphSource="{Binding Graph, Mode=OneTime}"

20. ActiveTool="{Binding DiagramTool}">

21. <telerik:RadDiagram.ShapeStyle>

22. <Style TargetType="telerik:RadDiagramShape">

23. 

24. 

25. <Setter Property="Position"

26. Value="{Binding Position, Mode=TwoWay}" />

27. 

28. <Setter Property="RotationAngle"

29. Value="{Binding RotationAngle, Mode=TwoWay}" />

30. 

31. <Setter Property="Width"

32. Value="{Binding Width, Mode=TwoWay}" />

33. <Setter Property="Height"

34. Value="{Binding Height, Mode=TwoWay}" />

35. <Setter Property="Content"

36. Value="{Binding Content, Mode=OneTime}" />

37. <Setter Property="Template">

38. <Setter.Value>

39. <ControlTemplate>

40. <TextBlock Text="{Binding Content}" />

41. </ControlTemplate>

42. </Setter.Value>

43. </Setter>

44. </Style>

45. </telerik:RadDiagram.ShapeStyle>

46. </telerik:RadDiagram>

47.

48. <StackPanel HorizontalAlignment="Left">

49. <Button Command="{Binding CommandPointer, Mode=OneTime}"

50. Content="Pointer" />

51. <Button Command="{Binding CommandLine, Mode=OneTime}"

52. Content="Line" />

53. </StackPanel>

54. </Grid>

55.</Window>

001.Imports Telerik.Windows.Diagrams

002.Imports Telerik.Windows.Controls.Diagrams.Extensions.ViewModels

003.

004.

005.Public Class MyViewModel

006. Inherits Telerik.Windows.Controls.ViewModelBase

007.

008. Public Property Graph As New MyGraphSource()

009.

010. Private _diagram_tool As Telerik.Windows.Diagrams.Core.MouseTool

011. Public Property DiagramTool As Telerik.Windows.Diagrams.Core.MouseTool

012. Get

013. Return _diagram_tool

014. End Get

015. Set(value As Telerik.Windows.Diagrams.Core.MouseTool)

016. _diagram_tool = value

017. OnPropertyChanged("DiagramTool")

018. End Set

019. End Property

020.

021. Public ReadOnly Property CommandPointer As ICommand

022. Get

023. Return New CommandImpl(Sub() DiagramTool = Core.MouseTool.PointerTool)

024. End Get

025. End Property

026.

027. Public ReadOnly Property CommandLine As ICommand

028. Get

029. Return New CommandImpl(Sub() DiagramTool = Core.MouseTool.PathTool)

030. End Get

031. End Property

032.End Class

033.

034.Public Class MyGraphSource

035. Inherits ObservableGraphSourceBase(Of MyBaseNode, MyLink)

036.

037. Public Sub New()

038. Dim node1 As New MyBaseNode() With {.Content = "node 1", .Position = New Point(100, 100), .Width = 60, .Height = 30}

039. Dim node2 As New MyBaseNode() With {.Content = "node 2", .Position = New Point(400, 100), .Width = 60, .Height = 30}

040. Dim node3 As New MyBaseNode() With {.Content = "node 3", .Position = New Point(100, 200), .Width = 60, .Height = 30}

041. Dim node4 As New MyBaseNode() With {.Content = "node 4", .Position = New Point(400, 400), .Width = 60, .Height = 30}

042.

043. Dim link1 As New MyLink(node1, node4) With {.Content = "A"}

044. Dim link2 As New MyLink(node1, node3) With {.Content = "B"}

045. Dim link3 As New MyLink(node1, node2) With {.Content = "C"}

046. Dim link4 As New MyLink(node2, node3) With {.Content = "D"}

047.

048. AddNode(node1)

049. AddNode(node2)

050. AddNode(node3)

051. AddNode(node4)

052.

053. AddLink(link1)

054. AddLink(link2)

055. AddLink(link3)

056. AddLink(link4)

057. End Sub

058.

059.

060.

061.End Class

062.

063.Public Class CommandImpl

064. Implements ICommand

065.

066. Private _command_action As Action

067. Public Sub New(p_action As Action)

068. _command_action = p_action

069. End Sub

070.

071. Public Function CanExecute(parameter As Object) As Boolean Implements ICommand.CanExecute

072. Return True

073. End Function

074.

075. Public Event CanExecuteChanged(sender As Object, e As EventArgs) Implements ICommand.CanExecuteChanged

076.

077. Public Sub Execute(parameter As Object) Implements ICommand.Execute

078. _command_action()

079. End Sub

080.End Class

081.

082.Public Class MyBaseNode

083. Inherits NodeViewModelBase

084.

085. Public Overrides Function ToString() As String

086. Return If(Content IsNot Nothing, Content.ToString, "")

087. End Function

088.End Class

089.

090.

091.Public Class MyLink

092. Inherits LinkViewModelBase(Of MyBaseNode)

093.

094. Public Sub New()

095. MyBase.New()

096. End Sub

097.

098. Public Sub New(source As MyBaseNode, target As MyBaseNode)

099. MyBase.New(source, target)

100. End Sub

101.

102. Public Overrides Function ToString() As String

103. Return If(Content IsNot Nothing, Content.ToString, "")

104. End Function

105.End Class

Diagram

answered on 07 Jun 2016

3 answers

196 views

Drag and drop between controls on separate tiles

I'm attempting to implement dragging and dropping between controls on two different tiles. It seems that I need to override the default tile reordering behavior, but only when the drag event source is not a Tile (such as when dragging a control inside a tile's contents to another tile). Specifically, I'm trying to drag from a RadGridView inside a Tile to another Tile.

Is this something that is feasible?

I appreciate any advice,

Thanks

TileList

answered on 07 Jun 2016

2 answers

232 views

Timeline View - Set First Date

Hi,

Is it possible to use the timeline layout for 7 days but setting the first date shown to be the first day of the week. If I switch from Day view to Timeline view, the first day shown in the Timeline is always the day you were looking at in Day View whereas I would like it to be the first day of that week - Monday.

I would use Week View but when I put it into Horizontal orientation to try and emulate the Timeline layout, the date part of the TimeRuler sits on the Y axis (along with each Resource) and this stretches out each Resource bigger than I would like - ideally I want the dates to stay with the times on the TimeRuler.

Thanks.

ScheduleView

answered on 07 Jun 2016

4 answers

72 views

enlarge\decrease RadPanes that under the same radPaneGroup

*I am using telerik:RadSplitContainer to wrap one paneGroup (and will holds more panes)

The first Radpane is starting with the app, the second is floating RadPane that i am docked to the first RadPaneGroup and i want to change his size)

The scenario:

1. Appliction start with one RadPane

My start code:
<telerik:RadDocking x:Name="dockEngineering"
   <telerik:RadDocking.DocumentHost>
       <telerik:RadSplitContainer x:Name="MiddleContainer">
             <telerik:RadPaneGroup x:Name="myPaneGroup">
              <telerik:RadPane Header="1" >
                      <user control/>
                </telerik:RadPane>
          </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
    </telerik:RadDocking.DocumentHost>
</telerik:RadDocking>

2.Double click on a button open a floating RadPane (create from code)

3. I Docked the floating RadPane to the existing radPaneGroup (myPaneGroup)

Code for step 2 and 3:

creating RadPane from code and add it to the myPaneGroup :

myRadpane = new MyRadPane(myPaneGroup) //MyRadPane is RadPane user control
myPaneGroup.Items(myRadpane ) //add the radpane to specific PaneGroup
makeFloatingDockable() //make it float

4. now in my application I have 2 panes (under the same RadPaneGroup ) side by side (looks ok in the UI)

*************************The problem**************

I want to enlarge\decrease the size of one of them - how can i do it?

Thanks

Docking

answered on 07 Jun 2016

1 answer

215 views

RadButton mouse event doesn't work

<telerik:RadButton x:Name="button" Width="48" Height="40" BorderThickness="0" Foreground="{x:Null}" MouseLeftButtonDown="button_MouseLeftButtonDown" MouseLeftButtonUp="button_MouseLeftButtonUp" MouseUp="button_MouseUp" MouseDown="button_MouseDown">

RadButton mouse event doesn't work.

Expander

answered on 07 Jun 2016

1 answer

163 views

Problem with IsExpandedBinding after reload data

Dear team,

I've a problem with IsExpandedBinding on refreshing data. It's a user experience problem:

When I reload data the control first collapse all nodes and then it expands expanded nodes. This expand status change is very fast but visible and not very nice.

I don't know if TreeListView works like this, if is a problem of my code or if exist some way of avoid this behavior. I would find a way of refresh control after set the expand status of all nodes.

This is the header of my control:

<telerik:RadTreeListView
IsExpandedBinding="{Binding IsExpanded, Mode=TwoWay}"
AutoGenerateColumns="False"
IsDragDropEnabled="True"
IsReadOnly="False"
ItemsSource="{Binding PivotedItems}"
SelectedItem="{Binding CurrentPivotedItem, Mode=TwoWay}">

Thank you in advance!

TreeListView

answered on 07 Jun 2016

1 answer

291 views

Slider with multiple ranges

Dear team,

I need to create an slider with multiple ranges. It means that I need a minimum of 4 thumbs and I don't know if this behavior is possible with RadSlider.

Telerik's slider webpage annouces that "Single or Multiple Thumbs Support". Multiple means 2? or more than 2?

Thanks in advance.

Slider

answered on 07 Jun 2016

13 answers

595 views

Programmatically aded items are not visible in RadTreeView.

Hi. I write WPF MVVM Prism 6 modular application where I try to use RadTreeView. I add items to RadTreeView through ObservableCollection (to which RadTreeView is bound) using the "Add" method of the collection. I begin to add items to root item of the tree. After completion of code of adding of a child item to tree root item the "+" appears on the left of this root item. When I click on this "+" by the mouse it turns into "-" but added item is not visible in the RadTreeView. Below is the complete code of the class representing the type of element added (as child) to the tree root item:

public class Group : ProfileElementType, IEditableObject

{

/// <summary>

/// Device profile elements group structure.

/// </summary>

struct GroupData

{

/// <summary>

/// Group name (for example, "RealtimeClock).

/// </summary>

internal string name;

/// <summary>

/// Brief description

/// </summary>

internal string description;

/// <summary>

/// Child elements collection.

/// </summary>

internal ObservableCollection<ProfileElementType> _childProfileElenents;

}

#region Fields

/// <summary>

/// Group data after their changing.

/// </summary>

private GroupData _newGroupData;

/// <summary>

/// Old data buffer.

/// </summary>

private GroupData _backupGroupData;

/// <summary>

/// Edit mode flag.

/// </summary>

private bool _isEditMode = false;

#endregion

#region Constructor

/// <summary>

/// Creates instance of Group.

/// </summary>

public Group()

{

this.ElementType = this.GetType();

this.ElementTypeName = this.ElementType.Name;

this._newGroupData = new GroupData();

this._newGroupData.name = string.Empty;

this._newGroupData.description = string.Empty;

this.ChildProfileElenents = new ObservableCollection<ProfileElementType>();

}

#endregion

#region Properties

/// <summary>

/// Gets or sets group name.

/// </summary>

[Display(Description = "The name of the group."]

public string Name

{

get { return this._newGroupData.name; }

set { this._newGroupData.name = value; }

}

/// <summary>

/// Brief description of the group.

/// </summary>

[Display(Description = "Brief description of group."]

public string Description

{

get { return this._newGroupData.description; }

set { this._newGroupData.description = value; }

}

/// <summary>

/// Group child elements collection.

/// </summary>

[Browsable(false)]

public ObservableCollection<ProfileElementType> ChildProfileElenents { get; set; }

#endregion

#region Methods

/// <summary>

/// String representation of instance of Group.

/// </summary>

/// <returns></returns>

public override string ToString()

{

StringWriter stringWriter = new StringWriter();

stringWriter.Write(this.ElementTypeName);

stringWriter.Write(": ");

stringWriter.Write(this.Name);

stringWriter.Write(" ");

stringWriter.Write(this.Description);

return stringWriter.ToString();

}

#endregion

#region IEditableObject implementation

/// <summary>

/// Begins to edit.

/// </summary>

public void BeginEdit()

{

if(!this._isEditMode)

{

this._backupGroupData = this._newGroupData;

this._isEditMode = true;

}

/// <summary>

/// Cancels edit results.

/// </summary>

public void CancelEdit()

{

if (this._isEditMode)

{

this._newGroupData = this._backupGroupData;

this._isEditMode = false;

}

/// <summary>

/// Accepts edit results.

/// </summary>

public void EndEdit()

{

if (this._isEditMode)

{

this._backupGroupData = new GroupData();

this._isEditMode = false;

}

#endregion

}

Below isProfileElementType base class. It is base for both Gruop and Register classes.

public class ProfileElementType : IProfileElementType

{

#region Fields

/// <summary>

/// Profile element type - Register or Group (група).

/// </summary>

private Type _elementType;

/// <summary>

/// Profile element type name - "Register" or "Group".

/// </summary>

private string _elementTypeName;

#endregion

#region Properties

/// <summary>

/// Gets or sets profile element type name string - "Register" or "Group".

/// </summary>

[Browsable(false)]

public string ElementTypeName

{

get { return this._elementTypeName; }

set { this._elementTypeName = value; }

}

#endregion

#region IProfileElementType implementation

/// <summary>

/// Gets or sets profile element type - Register or Group.

/// </summary>

[Browsable(false)]

public Type ElementType

{

get { return this._elementType; }

set { this._elementType = value; }

}

#endregion

}

Below is definition of instance of group (root item element) in view model:

/// <summary>

/// The tree root element. Its child elements collection is for organization of the device profile tree.

/// </summary>

private Group _profileTreeRoot;

public Group ProfileTreeRoot

{

get { return this._profileTreeRoot; }

set { this.SetProperty(ref this._profileTreeRoot, value); }

}

// This code in view model constructor:

this.ProfileTreeRoot = new Group();

In my application I have two classes of tree nodes: "Group" and "Register". I won't show Register class definition (because I'm experimenting with Group class now) but ItemStyleSelector class is below:

public class ItemStyleSelector : StyleSelector

{

public override Style SelectStyle(object item, DependencyObject container)

{

if (item is Group)

return this.GroupStyle;

else if (item is Register)

return this.RegisterStyle;

return null;

}

public Style GroupStyle { get; set; }

public Style RegisterStyle { get; set; }

}

Below is XAML of view in wich RadTreView is located (this XAML is shortened here in the post):

<Grid.Resources>

<Style x:Key="GroupItemStyle" TargetType="telerik:RadTreeViewItem">

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

<Setter Property="FontStyle" Value="Normal" />

<Setter Property="FontWeight" Value="Normal"/>

<Setter Property="DefaultImageSrc" Value="/Images/Group.png" />

<Style.Triggers>

<Trigger Property="IsExpanded" Value="True">

<Trigger.Setters>

<Setter Property="Foreground" Value="ForestGreen" />

<Setter Property="FontStyle" Value="Italic" />

<Setter Property="FontWeight" Value="SemiBold"/>

</Trigger.Setters>

</Trigger>

</Style.Triggers>

</Style>

<Style x:Key="RegisterItemStyle" TargetType="telerik:RadTreeViewItem">

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

<Setter Property="FontStyle" Value="Normal" />

<Setter Property="DefaultImageSrc" Value="/Images/File.png" />

</Style>

<HierarchicalDataTemplate DataType="{x:Type model:Group}" ItemsSource="{Binding ChildProfileElenents}">

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

</HierarchicalDataTemplate>

<DataTemplate DataType="{x:Type model:Register}">

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

</DataTemplate>

<local:ItemStyleSelector x:Key="ItemStyleSelector"

GroupStyle="{StaticResource GroupItemStyle}"

RegisterStyle="{StaticResource RegisterItemStyle}"/>

</Grid.Resources>

<telerik:RadTreeView x:Name="DeviceProfileTree" Grid.Row="1" Grid.Column="0">

<telerik:RadTreeViewItem Header="{Binding RootHeader}"

ItemContainerStyleSelector="{StaticResource ItemStyleSelector}"

ItemsSource="{Binding ProfileTreeRoot.ChildProfileElenents}"/>

<telerik:EventToCommandBehavior.EventBindings>

<telerik:EventBinding

Command="{Binding HandleProfileElementSelectionCommand}"

EventName="Selected"

PassEventArgsToCommand="True"/>

</telerik:EventToCommandBehavior.EventBindings>

</telerik:RadTreeView>

Below is RootHeader definition in the view model:

private string _rootHeader;

public string RootHeader

{

get { return this._rootHeader; }

set { this.SetProperty(ref this._rootHeader, value); }

}

// This code in the view model constructor:

this.RootHeader = "Flow Meter";

Below is HandleProfileElementSelectionCommand command method (though here it does not matter as it seems to me):

private void handleProfileElementSelection(object parameter)

{

if (!this._isProfileElementSelected)

this._isProfileElementSelected = true;

RadRoutedEventArgs args = parameter as RadRoutedEventArgs;

if ((args.Source as RadTreeViewItem).IsRootItem)

this._isRootItemSelected = true;

else

{

if (this._isRootItemSelected)

this._isRootItemSelected = false;

}

Below is command method for adding of new group:

private void addNewGroup(object parameter)

{

// If parent element was selected in the RadTreeView:

if (this._isProfileElementSelected)

{

// Set property (to which RadPropertyGrid is bound in view) to new Group.

this.ProfileElement = new Group();

this._isAddNewItem = true;

}

Below is ProfileElement definition in the view model:

/// <summary>

/// Device profile element. Can be as Group or as Register that are inherited from it.

/// </summary>

private ProfileElementType _profileElement;

public ProfileElementType ProfileElement

{

get { return this._profileElement; }

set { this.SetProperty(ref this._profileElement, value); }

}

Below is command method for saving added Group instance in the RadTreeView:

private void saveChanges(object parameter)

{

// If new profile element is added to the device profile tree.

if(this._isAddNewItem)

{

// If this element is added as the child of the tree root element.

if (this._isRootItemSelected)

{

if (this.ProfileElement.ElementTypeName == "Group")

this.ProfileTreeRoot.ChildProfileElenents.Add(this.ProfileElement as Group);

else

this.ProfileTreeRoot.ChildProfileElenents.Add(this.ProfileElement as Register);

}

else

{

// Add to selected group inside root element (not implemented now)

}

this._isAddNewItem = false;

}

else

{

// Save changes for existed selected device profile element (not implemented now).

}

As you can see adding to RadTreeView performs via ObservableCollection to which root node of RadTreeView is bound. Why added child element is not visible? Please help me to eliminate this error. In attach files there are solution structure (in Snapshot_10.png file), RadTreeView in collapsed status after adding the element (in Collapsed_Tree.png file) and RadTreeView in unwrapped status (in Unwrapped_Tree.png file). I hope for your help very much.

TreeView

answered on 07 Jun 2016