Questions on UI for WPF Forum

2 answers

117 views

Axis directions

Great work on the ChartView. I'm getting to know the control with a view to hopefully using it in a significant project. As a long time WPF and MVVM developer, I'm happy to say that so far it works in the way I expect it to work.

One thing that I'm finding strange though, is the order of categories on a vertical categorical axis. Let's say I have four categories in my data, 'North', 'East', 'South', 'West', in that order. In a horizontal bar chart I would expect 'North' to be the top bar and 'West' to be the bottom. Your implementation has it the other way round.

Now, I can see why you do it like this, as other axes (linear, logarithmic) increase in value as they move away from the origin. Excel does the same too, but allows a switch for people who prefer their axes the other way round.

Is there an easy way to switch them, or shall I just sort them myself?

thanks
Pete

ChartView

answered on 11 Jun 2013

1 answer

192 views

ListBox To TileView With Swap and Placeholder

Hi Telerik Team,

I need suggestion on moving items from listbox to tileview, in which tileview's drag mode is swap and tileview will contain rows and columns of empty placeholder for example like <div>,when items form listbox dragged and droped on this empty placeholder, this empty placeholder gets replaced with dropped item, and within tileview items interchange in swap mode.

Regards,
Vivek Dev

TileView

answered on 11 Jun 2013

5 answers

150 views

Best way to trap mouse down/drag over a group of cells?

I have a grid with 49 columns. Column 1 is the day of the week, and the rest of the columns are the time of day in 30 minute increments. What I'm trying to accomplish is when I click and drag across several cells, I want to change the back color of any cell I drag over. What is the best way to accomplish this with the radGridView?

GridView

answered on 11 Jun 2013

3 answers

184 views

Textbox double spacebar

Hi,

I have the problem with textbox in RadListBox. There's empty RadListBox ( no resources, no styles etc. ) and TextBox inside. When i type any character in textbox it is working properly, but when i type spacebar, i have double space. It's everytime i type spacebar and only spacebar. For example when i type abc spacebar bca in my textbox i have abc bca, with 2 white spaces. every one spacebar gives mi two white spaces

ListBox

answered on 10 Jun 2013

1 answer

226 views

From RadTreeView to RadGridView

I'm trying to drag items from a TreeGridView to a RadGridView, such that a single item will be stored in a single cell.

I have predefined columns with headers "A" to "Z" and want to drop items from the treeview to a single column, i.e. drop an item to column A and another item to column H, such that the rest of the columns are empty.

All of this should happen on a single row under the headers. I also don't want to be able to drag the column headers.

Are there any good solutions to this problem? I'm not sure what to do. Maybe there is a better View to use?
This is what I have so far:

Example.xaml.cs

using System;

using System.Collections;

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.Linq;

using System.Windows;

using System.Windows.Media;

using Telerik.Windows.Controls;

using Telerik.Windows.Controls.DragDrop;

using Telerik.Windows.Controls.TreeView;

using System.Windows.Controls;

using System.Windows.Data;

namespace Telerik.Windows.Examples.DragAndDrop.WPF.TreeToGrid

{

public partial class Example : System.Windows.Controls.UserControl

{

MyCollection results = new MyCollection();

public Example()

{

InitializeComponent();

// Set the items source of the controls:

allProductsView.ItemsSource = CategoryViewModel.Generate();

//IList orderSource = new ObservableCollection<string>();

//orderView.ItemsSource = orderSource;

//foreach (ProductViewModel product in ProductViewModel.Generate(6))

//{

// wishlistSource.Add(product);

//}

// Allow dropping into the ListBox and GridView only if the

// dragged items are all products:

RadDragAndDropManager.AddDropQueryHandler(orderView, OnDropQuery);

// Change the drag cue and choose an action for the sucessful drop

// in the Order GridView:

RadDragAndDropManager.AddDropInfoHandler(orderView, OnGridViewDropInfo);

// Allow dragging of the Wishlist and Order items:

RadDragAndDropManager.AddDragQueryHandler(orderView, OnOrderDragQuery);

// Handle the case when items are dragged away from the ListBox

// and the Order:

RadDragAndDropManager.AddDragInfoHandler(orderView, OnOrderDragInfo);

List<String> details = new List<string>();

char a = 'A';

char z = 'Z';

for (char cntr = a; cntr <= z; cntr++)

{

details.Add(cntr + "");

}

results.Add(details);

AddColumns(details);

//-----set binding here or in Xaml------------------------

Binding binding = new Binding();

binding.Source = results;

orderView.SetBinding(RadGridView.ItemsSourceProperty, binding);

}

private void AddColumns(List<String> myColumns)

{

//RadGridView viewLayout = new RadGridView();

//GridView viewLayout = new GridView();

for (int i = 0; i < myColumns.Count; i++)

{

orderView.Columns.Add(new Telerik.Windows.Controls.GridViewColumn

{

Header = myColumns[i],

IsResizable = false,

//BindingGroup = new BindingGroup(),

//DisplayMemberBinding = new Binding(" ")

});

}

orderView.CanUserInsertRows = false;

}

private void OnOrderDragInfo(object sender, DragDropEventArgs e)

{

IEnumerable draggedItems = e.Options.Payload as IEnumerable;

if (e.Options.Status == DragStatus.DragInProgress)

{

//Set up a drag cue:

TreeViewDragCue cue = new TreeViewDragCue();

//Here we need to choose a template for the items:

cue.ItemTemplate = this.Resources["ProductTemplate"] as DataTemplate;

cue.ItemsSource = draggedItems;

e.Options.DragCue = cue;

}

else if (e.Options.Status == DragStatus.DragComplete)

{

IList source = this.orderView.ItemsSource as IList;

foreach (object draggedItem in draggedItems)

{

source.Remove(draggedItem);

}

private void OnOrderDragQuery(object sender, DragDropQueryEventArgs e)

{

if (this.orderView != null)

{

IList selectedItems = this.orderView.SelectedItems;

e.QueryResult = selectedItems.Count > 0;

e.Options.Payload = selectedItems;

}

e.QueryResult = true;

e.Handled = true;

}

private void OnGridViewDropInfo(object sender, DragDropEventArgs e)

{

ICollection draggedItems = e.Options.Payload as ICollection;

// Get the drag cu that the TreeView or we have created

TreeViewDragCue cue = e.Options.DragCue as TreeViewDragCue;

if (e.Options.Status == DragStatus.DropPossible)

{

// Set a suitable text:

cue.DragActionContent = String.Format("Add {0} item{1} to Order", draggedItems.Count, draggedItems.Count > 1 ? "s" : String.Empty);

cue.IsDropPossible = true;

this.orderView.Background = this.Resources["DropPossibleBackground"] as Brush;

}

else if (e.Options.Status == DragStatus.DropImpossible)

{

cue.DragActionContent = null;

cue.IsDropPossible = false;

}

else if (e.Options.Status == DragStatus.DropComplete)

{

IList items = this.orderView.ItemsSource as IList;

foreach (object draggedItem in draggedItems)

{

items.Add(draggedItem);

}

if (e.Options.Status != DragStatus.DropPossible)

{

this.orderView.Background = new SolidColorBrush(Colors.White);

}

private void OnDropQuery(object sender, DragDropQueryEventArgs e)

{

// We allow drop only if the dragged items are products:

ICollection draggedItems = e.Options.Payload as ICollection;

bool result = draggedItems.Cast<object>().All((object item) => item is ProductViewModel);

e.QueryResult = result;

e.Handled = true;

// Note that here we agree to accept a drop. We will be notified

// in the DropInfo event whether a drop is actually possible.

}

public class ExampleTemplateSelector : DataTemplateSelector

{

public override DataTemplate SelectTemplate(object item, DependencyObject container)

{

if (item is ProductViewModel)

{

return ProductTemplate;

}

else if (item is CategoryViewModel)

{

return CategoryTemplate;

}

return null;

}

public DataTemplate ProductTemplate { get; set; }

public DataTemplate CategoryTemplate { get; set; }

}

public class CategoryViewModel

{

public static IList Generate()

{

var apiOutput1 = new CategoryViewModel();

apiOutput1.Title = "List items";

apiOutput1.Items.Add("Item1");

apiOutput1.Items.Add("Item2");

var apiOutput2 = new CategoryViewModel();

apiOutput2.Title = "Item Price";

apiOutput2.Items.Add("Price1");

apiOutput2.Items.Add("Price2");

var userDefFields = new CategoryViewModel();

userDefFields.Title = "User fields";

userDefFields.Items.Add("Field1");

userDefFields.Items.Add("Field2");

IList result = new List<object>();

result.Add(apiOutput1);

result.Add(apiOutput2);

result.Add(userDefFields);

return result;

}

public CategoryViewModel()

{

Items = new ObservableCollection<object>();

}

public string Title { get; set; }

public IList Items { get; set; }

}

public class ProductViewModel

{

public ProductViewModel(string name, string desc)

{

Name = name;

Description = desc;

}

public string Name { get; set; }

public string Description { get; set; }

public override string ToString()

{

return Name.ToString();

}

public class MyCollection : ObservableCollection<List<string>>

{

public MyCollection()

: base()

{

}

Example.xaml

<UserControl x:Class="Telerik.Windows.Examples.DragAndDrop.WPF.TreeToGrid.Example"

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

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

xmlns:nav="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"

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

xmlns:gridViewElements="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"

xmlns:example="clr-namespace:Telerik.Windows.Examples.DragAndDrop.WPF.TreeToGrid"

xmlns:dragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls">

<UserControl.Resources>

<telerik:MetroColors x:Key="MetroColors" />

<SolidColorBrush x:Key="AccentBrush" Color="{Binding Source={StaticResource MetroColors}, Path=Palette.AccentColor}" />

<SolidColorBrush x:Key="BasicBrush" Color="{Binding Source={StaticResource MetroColors}, Path=Palette.BasicColor}" />

<SolidColorBrush x:Key="StrongBrush" Color="{Binding Source={StaticResource MetroColors}, Path=Palette.StrongColor}" />

<SolidColorBrush x:Key="MainBrush" Color="{Binding Source={StaticResource MetroColors}, Path=Palette.MainColor}" />

<SolidColorBrush x:Key="MarkerBrush" Color="{Binding Source={StaticResource MetroColors}, Path=Palette.MarkerColor}" />

<SolidColorBrush x:Key="ValidationBrush" Color="{Binding Source={StaticResource MetroColors}, Path=Palette.ValidationColor}" />

<DataTemplate x:Key="WishlistProduct">

<StackPanel Orientation="Horizontal">

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

<TextBlock Text=", (" Foreground="Gray" />

<TextBlock Text="{Binding UnitPrice}" Foreground="Gray" />

<TextBlock Text=")" Foreground="Gray" />

</StackPanel>

</DataTemplate>

<HierarchicalDataTemplate x:Key="CategoryTemplate" ItemsSource="{Binding Items}">

<StackPanel Orientation="Horizontal">

<Image Width="16" Height="16" Source="../../Images/DragAndDrop/folder_icon.png" Margin="3"

VerticalAlignment="Center" />

<TextBlock Text="{Binding Title}" Foreground="{StaticResource MainBrush}" Margin="2" VerticalAlignment="Center" />

</StackPanel>

</HierarchicalDataTemplate>

<DataTemplate x:Key="ProductTemplate">

<DockPanel Margin="2" MaxWidth="200">

<TextBlock Text="{Binding Name}" FontWeight="Bold" Foreground="{StaticResource MainBrush}" DockPanel.Dock="Top" />

<!--<TextBlock Text="{Binding Description}" DockPanel.Dock="Left"

Margin="2 0 0 0" Foreground="{StaticResource MainBrush}" TextWrapping="Wrap" /> -->

</DockPanel>

</DataTemplate>

<example:ExampleTemplateSelector x:Key="ExampleTemplateSelector"

CategoryTemplate="{StaticResource CategoryTemplate}"

ProductTemplate="{StaticResource ProductTemplate}" />

<Style TargetType="nav:RadTreeViewItem" x:Key="TreeViewItemStyle">

<Setter Property="IsExpanded" Value="True" />

</Style>

<Style TargetType="gridViewElements:GridViewRow" x:Key="OrderItemStyle">

<Setter Property="dragDrop:RadDragAndDropManager.AllowDrag" Value="True" />

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="3*" />

</Grid.ColumnDefinitions>

<Border BorderBrush="#C8C9CC" BorderThickness="2" CornerRadius="6" Margin="46 46 0 46" Background="White">

<DockPanel>

<Border DockPanel.Dock="Top" Background="{StaticResource AccentBrush}" CornerRadius="4 4 0 0">

<TextBlock Text="All Products" Margin="20 5 5 5" Foreground="{StaticResource MainBrush}" FontSize="14"/>

</Border>

<nav:RadTreeView x:Name="allProductsView"

ItemTemplateSelector="{StaticResource ExampleTemplateSelector}"

ItemContainerStyle="{StaticResource TreeViewItemStyle}"

IsDragDropEnabled="True" Background="{StaticResource AccentBrush}" Padding="5"/>

</DockPanel>

</Border>

<Border BorderBrush="#C8C9CC" BorderThickness="2" CornerRadius="6" Margin="46 46 0 46"

Background="White" Grid.Column="1">

<DockPanel>

<Border DockPanel.Dock="Top"

Background="{StaticResource AccentBrush}" CornerRadius="4 4 0 0">

<TextBlock Text="Order" Foreground="{StaticResource MainBrush}" Margin="20 5 5 5" FontSize="14" />

</Border>

<telerik:RadGridView x:Name="orderView" dragDrop:RadDragAndDropManager.AllowDrop="True"

CanUserInsertRows="False" IsReadOnly="True" CanUserFreezeColumns="False"

ShowGroupPanel="False"/>

</DockPanel>

</Border>

</Grid>

</UserControl>

DragAndDrop

answered on 10 Jun 2013

1 answer

303 views

Slow loading of Documents in RichTextBox

Dear Support,
I'm trying to develop a DocumentManagementSystem. For the time being, we are using Infragistics together with the TxTextControl.
But I found that both are not supporting WPF and MVVM very well, so I asked again for a new evaluation of Telerik and other Thirdpary-controls.

During comparison of the RichTextEditor I found out, that unfortunately (!) your RTF-Box does need significantly more time to load RTF or DOCX-Files than other Controls. Also scrolling ist not very smooth. It doesn't matter if the document has just 1-2 pages or over 10.
So I furthermore compared with your WinForms-Version and found out that the WinForms-RichTextBox is as fast as I would expect.

Referring to this thread : Rich Text Box Performance Issue
might there be a bug which increases loadingtime of documents as well?

I would be very grateful if you could crosscheck with the RTF-Box of Q3 2012. Even better would be, if you could give me a link, where to download the older version in order to check this by myself.

Thank you very much in advance. Telerik would be my first choice, but it really depends on the speed and smootheness of the RTFBox.

PS: Any news about supporting DOC instead of DOCX only? Or do we still have to convert the documents, as you are already mentionening in the older threads?

RichTextBox

answered on 10 Jun 2013

2 answers

172 views

IsSelected not updating when selecting rows outside the screen

I use this trick to successfully update the IsSelected property of my rows' viewmodels:

<Style TargetType="telerik:GridViewRow" BasedOn="{StaticResource GridViewRowStyle}">

<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />

</Style>

SelectionMode is set to Extended. My RadGridView contains some 1000 rows. I do the following:
1) Select the first row.
2) Scroll down to the last row.
3) Press Shift and select the last row.

All rows are selected, but the IsSelected property is updated only on visible rows (around 20)! What am I doing wrong?

Please help! This bug is crucial in our software!

GridView

answered on 10 Jun 2013

4 answers

600 views

IsSelected binding not working correctly for GridViewRow

I have ObservableCollections that are bound to RadGridView and RadtreeListView controls to fill out the contents. I am using the IsSelected binding to process various operations on the ObservableCollections depending on what rows are selected.

Here is how the binding for IsSelected is defined in my XAML:

<em:StatusRowStyleSelector x:Key="StatusRowStyleDefinition">

<em:StatusRowStyleSelector.StatusRowStyle>

<Style TargetType="telerik:GridViewRow">

<Setter Property="Background" Value="{StaticResource NormalBorderBrush}" />

<Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}"/>

<Setter Property="IsExpanded" Value="{Binding Path=IsExpanded, Mode=TwoWay}"/>

</Style>

</em:StatusRowStyleSelector.StatusRowStyle>

</em:StatusRowStyleSelector>

And here is how the style is applied as an attribute in both the RadGridView and RadtreeListView tag definitions:

RowStyleSelector="{DynamicResource StatusRowStyleDefinition}"

SelectionMode="Extended"

SelectionUnit="FullRow"

The problem:

If I have a view where some of the rows are not visible and I select all of the items (ctrl-A), only those items that are visible get the IsSelected property updated in the source objects. If I scroll the hidden rows into view, the IsSelected property for the bound objects in the ObservableCollection finally gets updated as each row is scrolled into view. So, apparently, "selecting all" selects all of the rows in the control, but the IsSelected property in the bound source objects in the ObservableCollection is updated only for visible rows.

The same happens if all rows are selected and I click on single row which deselects everything else: only the visible rows get the IsSelected property updated to false.

It works this way regardless of the state of the data virtualization. I'm scratching my head over this. Am I setting up the binding wrong or is this a bug?

GridView

answered on 10 Jun 2013

1 answer

68 views

Release Date RadControls for WPF Q2'13 ?

Hi,

When will RadControls for WPF Q2'13 be released and will be available for download?

Thanks
Regards
Tsafrir

General Discussions

answered on 10 Jun 2013

1 answer

327 views

Custom scatter plot - PointTemplate

After reviewing the documentation, specifically http://www.telerik.com/help/silverlight/radchartview-styles-and-templates-customizing-scatter-points.html, I am exploring ways to scale a custom scatter point based on values of the underlying data.

I know there is an old post in this forum relating to bubble plots in RadChartView (where the bubble is sized based on the underlying data) which is not currently supported. This was 2012.

Looking at the source code for the Candlestick object (as part of the Candlestick series) as a reference, clearly the Candlestick uses sizing (scale) information to determine how big it should be based on the underlying data object. In particular, it uses the layout and size information in the LayoutSlot to draw itself accordingly which is exactly what I need to do. So, clearly the Candlestick has the mechanisms to do this internally (and in fact, it would be very nice if the classes were not declared Internal so they could easily be inherited and the issue would be easily solved for me just using a custom Candlestick object to draw what I want.

The scatter point template doesn't seem to get that information (the layout height and width is 0, only the X, Y coordinates are valid).

What I'm trying to do here is to write a custom point template which, using the load event on the template, can get scale information. I do this in code-behind instead of defining the template in XAML so bear with me. The template simply is a grid object with a handler attached to its loaded event, which causes the handler to be called whenever the chart renders the custom point template the first time the series is rendered. In the loaded event of the grid, we simply create content based on the underlying data point. This is very similar to the concept in the documentation where color and shape is changed. What I want to do however is SIZE the object based on the underlying data. Sizing is trivial, however, the sizing should match the current scale of the chart so the dimensions match the axis data, so I need a way to scale the axis information to the pixel. ChartView does provide a conversion API (http://www.telerik.com/help/silverlight/radchartview-features-conversion.html) but I haven't found a good way to hook that in.

What I have to date is this:

public static DataTemplate CreatePointTemplate(

[NotNull]RoutedEventHandler pointLoadedHandler,

string selectedBooleanField = null,

string notSelectedBooleanField = null

)

{

var template = new DataTemplate();

var gridFactory = new FrameworkElementFactory(typeof(Grid));

gridFactory.AddHandler(Control.LoadedEvent, pointLoadedHandler);

template.VisualTree = gridFactory;

return template;

}

The handler code is:

private void HandlePointCreated(object sender, RoutedEventArgs e)

{

var grid = (Grid)sender;

var scatterDataPoint = (ScatterDataPoint)((FrameworkElement)sender).DataContext;

var data = (HistoricalMarketDataPoint)scatterDataPoint.DataItem;

var layoutSlot = scatterDataPoint.LayoutSlot;

var bubble = new Ellipse();

var scale = !Equals(layoutSlot.Height, 0.0) ? data.PriceAverage/layoutSlot.Height : 1.0;

var scaleSize = new Size(scale*layoutSlot.Width, scale*layoutSlot.Height);

bubble.Width = scaleSize.Width;

bubble.Height = scaleSize.Height;

var chartPointBrush = new SolidColorBrush(Colors.Red);

bubble.Fill = chartPointBrush;

grid.Children.Add(bubble);

}

The layout slot width and height are always 0 for a scatter point so I can't derive the scale from the layout box. This is not true of the Candlestick object where it uses the layout information to size itself.

My custom point will be rendered at the X and Y locations correctly on the chart, what I'm missing is the ratio of pixel/value for the chart to allow me to compute the scale of the object so it matches the axes.

For simplicity, I'm using linear axes on both X and Y.

So what I'd like to do is to compute the scale value in the handler code above. I can easily get a reference to the chart object in the handler if needed, but I have no idea where to fish the plot scale data from right now.

Alternatively, I can use a CandlestickSeries instead of a ScatterSeries and accomplish the same thing but changing the rendering of the candlestick so what I need to make it do. I haven't found of a way to do that via templates as the relevant overrides are all marked "internal".

Thanks!

E.

ChartView

answered on 07 Jun 2013