Questions on UI for WPF Forum

4 answers

508 views

Sorry for the naive question...

I am a first time user of the telerik WPF controls, I am following the tutorial here to add a RadGridView to my application...

My wpf application is build using MVVM, I am adding the RadGridView control to one of the views, see implementation below...

<UserControl x:Class="SprintAnalyzer.Module.Presentation.Views.MiddleView"

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:telerik="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:prism=

"clr-namespace:Microsoft.Practices.Prism.Interactivity.InteractionRequest;assembly=Microsoft.Practices.Prism.Interactivity"

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

xmlns:interactions="clr-namespace:SprintAnalyzer.Module.Presentation.Interactions"

xmlns:Views="clr-namespace:SprintAnalyzer.Module.Presentation.Views" mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="300">

<Grid x:Name="LayoutRoot" Background="Lavender">

<telerik:RadGridView x:Name="radGridView" AutoGenerateColumns="True"

ItemsSource="{Binding Path=AnalysisResults}" >

<telerik:RadGridView.Columns>

<telerik:GridViewDataColumn DataMemberBinding="{Binding Result}" Header="Result"/>

<telerik:GridViewDataColumn DataMemberBinding="{Binding Category}" Header="Category"/>

</telerik:RadGridView.Columns>

</telerik:RadGridView>

</Grid>

</UserControl>

Note - I have added a reference to xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" my project already has a reference to the Telerik.Windows.Code, Telerik.Windows.Controls.GridView and Telerik.Windows.Controls.Input.

When I run the application, the grid is not displayed at all.

The viewmodel implementation,

using System;

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows.Input;

using Microsoft.Practices.Prism.Commands;

using Microsoft.Practices.Prism.Events;

using SprintAnalyzer.Common;

using SprintAnalyzer.Common.Service;

using SprintAnalyzer.Module.Presentation.Models;

using SprintAnalyzer.Module.Presentation.Requests;

using SprintAnalyzer.RulesEngine;

using SprintAnalyzer.Common.Events;

namespace SprintAnalyzer.Module.Presentation.ViewModels

{

public class MiddleViewModel : ViewModelBase

{

private readonly IEventAggregator _eventAggregator;

private ICommand _button;

public string Output { get; private set; }

public ICommand OnClick

{

get { return _button; }

set

{

_button = value;

RaisePropertyChangedEvent("OnClick");

}

public MiddleViewModel(IApplicationContextService contextService, IEventAggregator eventAggregator)

{

this._contextService = contextService;

this._eventAggregator = eventAggregator;

this.OnClick = new DelegateCommand(this.Button_Clicked);

_eventAggregator.GetEvent<AnalysisRunTrigger>().Subscribe(ExecuteAnalysisRunTrigger, ThreadOption.BackgroundThread);

_eventAggregator.GetEvent<AnalysisResultEvent>().Subscribe(OnAnalysisRunResult, ThreadOption.UIThread);

_eventAggregator.GetEvent<ExceptionRaisedEvent>().Subscribe(OnExceptionRaised,

ThreadOption.UIThread);

this.AnalysisResults = new ObservableCollection<AnalysisResult>();

}

private void OnExceptionRaised(ExceptionDetail obj)

{

// Removed for now

}

private void OnAnalysisRunResult(AnalysisResult analysisResult)

{

AnalysisResults.Add(analysisResult);

}

private static Person CreatePerson()

{

// Removed for now

}

private void SetPeopleExecute()

{

// Removed for now

}

private void GetPersonCallback(Person p)

{

// Removed for now

}

private void CancelCallback()

{

// Removed for now

}

private ObservableCollection<AnalysisResult> _analysisResults;

public ObservableCollection<AnalysisResult> AnalysisResults

{

get

{

return _analysisResults;

}

set

{

_analysisResults = value;

RaisePropertyChangedEvent("AnalysisResults");

}

private void ExecuteAnalysisRunTrigger(string triggerState)

{

try

{

switch (triggerState)

{

case "StartAnalyzis":

rulesFactory.Execute();

break;

}

catch (Exception ex)

{

_eventAggregator.GetEvent<ExceptionRaisedEvent>().Publish(new ExceptionDetail() { Message = ex.Message });

}

private string _message;

private readonly IApplicationContextService _contextService;

public string Message

{

get { return _message; }

set

{

_message = value;

RaisePropertyChangedEvent("Message");

}

private void Button_Clicked()

{

//throw new NotImplementedException();

}

Note that the AnalysisResults is ObservableCollection...

If I take the RadGridView out of the equation and use the good old Wpf GridView control, my application works, I can see the grid load up with the values for the same code...

What am I missing?

GridView

answered on 27 Jun 2014

9 answers

312 views

Drag RadDiagramConnection between two shapes

I am working on a Diagram application that allows shapes to be dragged on to the Diagram from a side panel. Also available in the side panel are objects representing different kinds of Connections that could potentially exist between shapes in the Diagram. The functionality I am attempting to create is as follows:

- Two or more shapes exist in the diagram
- User clicks on one of the Connection types available in the side panel and drags it onto one of the shapes in the diagram

I've come this far and have appropriate event handlers set up to manipulate the relevant view models. Here is where I'm having trouble though.

- When the drag drop of a connection onto a shape is complete and the user lets go of the mouse, I would like to "attach" the RadDiagramConnection to their mouse cursor so that they can freely move it around on the diagram. Clicking on another shape on the diagram should set the RadDiagramConnection's target to the selected shape so that a connection is created between the two.

I've been through all the examples in the DragDropManager and Diagram controls and haven't seen anything that looks similar to this kind of functionality, so I'm hoping that somewhere out there someone has done something like this before. Would appreciate any suggestions!

Diagram

answered on 27 Jun 2014

1 answer

284 views

Custom Sorting on RadGridView with MVVM

Hi,
I am new to MVVM. I am trying to implement my a custom server side sorting with MVVM. I am able to handle the sorting command, where I asynchronously read data from the Web API. In the call back, I update the list which is bound to the grid's Itemsource. But this is clearing the sort arrow on the column header. Can some one give me a sample with this sort of Custom Sorting implemented and still able to retain the sort arrows on the column header.

GridView

answered on 27 Jun 2014

2 answers

222 views

RadTreeView - Customize Drag Preview image

Is there anyway to customize a DragPreview in WPF when using Telerik RadTreeView?

I've set

IsDragPreviewEnabled="True"

but all that does is display the namespace in a button rather than a preview of the actual item being dragged (which in this case is a row of a grid)

Idon't necessarily need show a preview of the row I'm dragging - it would be good enough to show a standard image, just to give the user some feedback that the drag was taking place.</p>

Any ideas how I could achieve this?

Thanks

General Discussions

answered on 27 Jun 2014

7 answers

515 views

Iterate all rows in GridView

Hi,

I need to iterate all rows in the grid under for the following criteria:

Virtual Rows and Columns are enabled
I am using GridView filter capabilities to reduce number of visible rows

I know from reading similar forum responses that it is strongly recommended not to iterate the grid rows but iterate thru the bound data object. However, the data object does not reflect the filtering on the data as displayed in the grid. In my app I need to save the data (no filtered rows) in a custom format to a file. How do you recommend I do this?

Since the GridView software is aware of virtual rows and is also aware of what is filtered a new GridView method to iterate the data object would be very helpful. This method would take into account the filtering as well as columns hidded by a column chooser.

Thanks
Rich

GridView

answered on 26 Jun 2014

2 answers

363 views

Image in Excel

Hello,

I search a way to add an image in Excel Export.

In SpreadSheet overview (http://www.telerik.com/help/wpf/radspreadsheet-overview.html) i can see "Supported feature : Images" ... Good !

I found this on your documentation : http://www.telerik.com/help/wpf/radspreadsheet-model-features-shapes-and-images.html
Sems I can create a "Floating Image" an add it to the shapes of WorkSheet : well !

BUT in my code, I don't have the Shapes collection on WorkSheet !

Telerik.Windows.Documents.Spreadsheet.Model.Worksheet sheet; sheet.Shapes ?

Telerik.Windows.Controls.RadSpreadsheet r; r.ActiveWorksheet.Shapes ?

Can't find FloatingImage anyway ?

I use Telerik 2013 Q3

Who to add my image ?
Thx

Spreadsheet

answered on 26 Jun 2014

1 answer

121 views

Low performance of RadRichTextBox SpellChecker

Hello, i'm using trial version of DevCraft (Q1 2014). And we're very interested in purchasing full version soon.

But i've got some bad performance experience when we are using ru-RU tdf Dictionary. I think that's because of its size (14Mb).

The main problem is with context menu with suggestions. When i make right-click on underlined by spellchecker word, i have to wait up to 10 seconds before context menu with suggestions is shown. Same experience i have with spelling dialog.

Are there any performace tips&tricks for my case?

There is no problem with English Dictionary and Spanish one.

RichTextBox

answered on 26 Jun 2014

4 answers

149 views

DayStartTime and DayEndTime with TimelineViewDefintion

Hello everyone,

I recently started using the RadScheduleView component. I started with the example provided by Telerik "TimeBar Minimap for ScheduleView". The RadScheduleView be used to display the interventions of our technicans. Our technicians have office hours (usually) between 7am to 20pm.
Our desire is to not display these hours to provide a better display of working hours. For this, we informed the DayStartTime and DayEndTime properties in TimelineViewDefintion.

<telerik:TimelineViewDefinition

ShowTimeRuler="True"

TimerulerGroupStringFormat="{}{0:dddd, dd/MM/yyyy}"

TimerulerMajorTickStringFormat="{}{0:%H}"

TimerulerMinorTickStringFormat=":{0:%m}"

VisibleDays="{Binding ElementName=TimeBar, Path=Selection, Converter={StaticResource VisibleDaysConverter}}"

StretchAppointments="True"

StretchGroupHeaders="True"

DayStartTime="07:00"

DayEndTime="20:00"

MajorTickLength="1h"

MinorTickLength="15min"

MinTimeRulerExtent="50"

MaxTimeRulerExtent="Infinity"

FirstDayOfWeek="Monday" />

This works well if we show one day as in the example (OneDay.png). On the timeline each MinorTick is 15 minutes.

By cons, if we show two consecutive days, the first day starts at 7am, the second day ends at 20pm but between the two days, all hours (even those outside of the desired range) are displayed. See TwoDays.png.

I marked in red on the image TwoDays.png parts that we do not want to see.

How do that the DayStartTime and DayEndTime properties will be used for every day when displaying several days?

Thank you for your help and sorry if my English is not great.

ScheduleView

answered on 26 Jun 2014

1 answer

135 views

GridViewIndentCell hidden and resulting row width

Hello,
I have a GridView with one column with width "*", and the rest "Auto", which allows for the user resizing the window.

I am hiding the Group Indent Cell using this:

<Style TargetType="telerik:GridViewIndentCell">

<Setter Property="Visibility" Value="Collapsed"/>

</Style>

but this seems to still affect the width of the resulting row since I end up with a gap at the end of the row which I can't use and can't click. It appears to me that the row is sized before the GridViewIndentCell is hidden, and the row is not resized again to allow for the extra width. (See attached screenshot).

1. Is there a way of removing this gap?
2. I would also like to turn off the border round the currently selected cell and can't find a way to do this.

Any help would be appreciated.

Thanks,
John

GridView

answered on 26 Jun 2014

1 answer

197 views

Weird RadTabItem behaviour when adding tabs - no wrapping or scrolling

Hi!

This has probably something to do with the style that my RadTabItems are using but I thought it would be faster for me to solve this by asking here.
What my problem is that adding of RadTabItems to my TabControl works until the tabs reach the right side of the application window. After that something weird is happening and no wrapping or anything is done, I only see some of the tabs and they are "scaled" to fill the visible part of the tabitem area.

I have tried changing the settings of TabControl:
- ScrollMode="Pixel", "Item", "Viewport"
- OverflowMode="Scroll", "Wrap"
- DropDownDisplayMode="Visible", "WhenNeeded"

but none of these seem to do anything in this case. I would like my tabcontrol to have scroll buttons if tab items overflow.

Maybe it has something to do with some Width or Height property?

Here's couple of screenshots before adding the last tab item and after adding it:

TabControl before adding last item
TabControl after adding last item

Here's the XAML for my TabControl:

<telerik:RadTabControl

Width="Auto"

Height="Auto"

x:Name="TabRegion"

Prism:RegionManager.RegionName="{x:Static inf:RegionNames.TabRegion}"

AllowDragReorder="True"

SelectedItemRemoveBehaviour="SelectPrevious"

ItemContainerStyle="{DynamicResource RadTabItemStyle1}"

ScrollMode="Viewport"

OverflowMode="Scroll"

DropDownDisplayMode="WhenNeeded"

SelectedIndex="{Binding SelectedDashboardTab, Mode=TwoWay}"/>

And here's RadTabItemStyle1:

<Style x:Key="RadTabItemStyle1" TargetType="{x:Type telerik:RadTabItem}">

<Setter Property="MinWidth" Value="50"/>

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

<Setter Property="MinHeight" Value="30"/>

<Setter Property="Background">

<Setter.Value>

<SolidColorBrush Color="#FF00659E"/>

</Setter.Value>

</Setter>

<Setter Property="HorizontalContentAlignment" Value="Center"/>

<Setter Property="VerticalContentAlignment" Value="Center"/>

<Setter Property="Padding" Value="10 0"/>

<Setter Property="IsTabStop" Value="False"/>

<Setter Property="Header" Value="{Binding DataContext.ViewTitle, UpdateSourceTrigger=PropertyChanged}"/>

<Setter Property="Height" Value="30" />

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

<Setter Property="HeaderTemplate">

<Setter.Value>

<DataTemplate>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<ContentControl Content="{Binding}" />

<telerik:RadButton Grid.Column="1"

Width="14"

Height="14"

Margin="5 0 0 0"

HorizontalAlignment="Center"

VerticalAlignment="Center"

FontSize="10"

Foreground="Black"

Background="White"

l:RoutedEventHelper.EnableRoutedClick="True"

Padding="0"

Focusable="False"

>

<Image Source="/Dashboard;component/Images/delete_icon.png" Width="10" Height="10" Focusable="False"/>

</telerik:RadButton>

</Grid>

</DataTemplate>

</Setter.Value>

</Setter>

<Setter Property="Template" Value="{DynamicResource RadTabItemControlTemplate2}"/>

</Style>

And the ControlTemplate it is using:

<ControlTemplate x:Key="RadTabItemControlTemplate2" TargetType="{x:Type telerik:RadTabItem}">

<Grid x:Name="wrapper">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStateGroup">

<VisualState x:Name="MouseOver">

<Storyboard>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverVisual"/>

</Storyboard>

</VisualState>

<VisualState x:Name="Normal"/>

<VisualState x:Name="Selected">

<Storyboard>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="SelectionVisual"/>

<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverVisual"/>

</Storyboard>

</VisualState>

<VisualState x:Name="SelectedMouseOver">

<Storyboard>

<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverVisual"/>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="SelectionVisual"/>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="SelectionVisual">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="#FFFFC92B"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>

<DoubleAnimation Duration="0:0:0.1" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HeaderElement"/>

<DoubleAnimation Duration="0:0:0.1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalVisual"/>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="PlacementStates">

<VisualState x:Name="HorizontalTop"/>

<VisualState x:Name="HorizontalLeft">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="180"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="HorizontalRight"/>

<VisualState x:Name="HorizontalBottom">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="180"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="VerticalTop">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="-90"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="VerticalLeft">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="90"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="VerticalRight">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="-90"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="VerticalBottom">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="-90"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Unfocused"/>

<VisualState x:Name="Focused"/>

</VisualStateGroup>

<VisualStateGroup x:Name="ValidationStates"/>

</VisualStateManager.VisualStateGroups>

<Border x:Name="NormalVisual" CornerRadius="0" Margin="0,2,0,0" Background="Black" BorderBrush="#05C33F3F" Height="28">

<Border BorderBrush="#FF002564" BorderThickness="1,1,1,0" CornerRadius="0" Background="#FF004D78"/>

</Border>

<Border x:Name="MouseOverVisual" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="0" Margin="0,2,0,0" Opacity="0" Background="#FF5FC2FA">

<Border BorderThickness="1,1,1,0" CornerRadius="0" BorderBrush="#00000000"/>

</Border>

<Border x:Name="SelectionVisual" BorderBrush="#00000000" BorderThickness="1,1,1,0" CornerRadius="0" Margin="0" Opacity="0" Background="Black">

<Border BorderBrush="Blue" BorderThickness="0,0,0,0" CornerRadius="0" Background="#FF0479BA"/>

</Border>

<telerik:LayoutTransformControl x:Name="OrientationTransform" IsTabStop="False">

<ContentPresenter x:Name="HeaderElement" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

</telerik:LayoutTransformControl>

</Grid>

</ControlTemplate>

Br,

Kalle

TabControl

answered on 26 Jun 2014