Questions on UI for WPF Forum

4 answers

155 views

Draw area of specific height on ChartView

Hi,

I'm facing a rather nasty problem here with the ChartView.

I want to draw 4 zones on the chart which show the user if a signal is off, kind of like quality zones. See attached image for an example.
The first zone is running from +infinity on Y-axis to a given Y-value, the second zone starts from this Y-value down to another Y-value.
Then there is a "normal" zone, which doesn't need to be drawn and then starting from a third Y-value down to a fourth Y-value is the third zone. Finally the fourth zone starts from the fourth Y-value up unto -infinity on Y-axis.

You'll get something like this:
-------------------------------------------------- + INFINITY
ZONE 1
-------------------------------------------------- Y-value 1
ZONE 2
-------------------------------------------------- Y-value 2
NORMAL ZONE
-------------------------------------------------- Y-value 3
ZONE 3
-------------------------------------------------- Y-value 4
ZONE 4
-------------------------------------------------- - INFINITY

I tried using the area series and this works, but it's not really nice. I need to draw the series on top off each other and the normal zone needs to be drawn too, but then in white. Doing so doesn't make the rulers show. Making the normal zone more transparent, is just awful!

So I placed a Canvas on top of the ChartView and wanted to render rectangles over the ChartView. I finally came up with a transformation algorithm since there is no method on the ChartView to convert a data-point to a pixel coordinate. Right now I'm at the point that I have this working, but... now I need to correct for the zooming & scrolling too.

This feels so wrong and hope someone can shed a light on this problem and guide me towards another path?
Bottom line, am I missing something or is my method with the Canvas the only way?

Kind regards,
Dwight

ChartView

answered on 26 Apr 2013

1 answer

102 views

Information that image was changed

I would like to have some pseudo preview after image was changed, so I would like to get image and preview it Image control.
E.g. I would like to didplay only image of size 180x180 but if image is bigger then I would display only top /left corner, so I would like to show user what will be displayed untill he accepts changes.

I would like to know when something was changed: rotated/sizechanged/customtool and then access to the chnaged image, that's all.
Is there any event that I can handle to be notified that command was executed?

ImageEditor

answered on 26 Apr 2013

3 answers

85 views

Treelistview getting node on right click

I am using MVVM. I wanted to know how to get the Node when you do right click on the node to View Model. My selected node and where am doing the right click is different

TreeListView

answered on 26 Apr 2013

3 answers

107 views

Persist dockable Pane full screen state on multiple monitors

Hello,

I've been trying out the Docker control and the persistence framework you provide. I must say I like how it works without requiring a lot of configuration.

I'm having issues with the persisted full screen state. If I drag a pane that is float-able to my second monitor, where I make it full screen, upon reopening the application, the pane is made full screen on my main monitor. The same thing happens with the main window as well.

If the window or pane isn't made full screen, the persisted layout works correctly.

Is this a bug or am I missing something?
Thank you

PersistenceFramework

answered on 26 Apr 2013

3 answers

241 views

Data generated by RtfFormatProvider.Export

Hi,

We recently updated our version of Telerik and I noticed a change in the content generated by the Export operation of the RtfFormatProvider. To better illustrate this, here's the result of an empty document exported to RTF for both the former and the new version of Telerik, using the following line of code :

new RtfFormatProvider().Export(new RadDocument());

With our former version (2011.3.1116.35), the result was the following (374 characters) :

{\rtf\ansi\ansicpg1252\uc1\deff0\deflang1033{\fonttbl{\f0 Verdana;}}{\colortbl\red0\green0\blue0 ;\red255\green255\blue255 ;}\nouicompat\viewkind4\paperw12240\paperh15840\margl1425\margr1425\margt1425\margb1425\deftab720\sectd\pgwsxn12240\pghsxn15840\marglsxn1425\margrsxn1425\margtsxn1425\margbsxn1425\headery720\footery720\pard\ltrpar\fs24\sl276\slmult1\sa180{\ltrch}\par}

With the new version (2012.2.0607.35), the result looks like this (3857 characters) :

{\rtf\ansi\ansicpg1252\uc1\deff0\deflang1033{\fonttbl{\f0 Verdana;}{\f1 Calibri;}}{\colortbl\red0\green0\blue0 ;\red255\green255\blue255 ;\red79\green129\blue189 ;\red0\green0\blue255 ;}{\*\defchp\ltrch\fs24\i0\b0\strike0\ulnone}{\*\defpap\sl276\slmult1\sa180}{\stylesheet{\*\ts2\tsrowd\sqformat\trbrdrt\brdrnone\trbrdrb\brdrnone\trbrdrl\brdrnone\trbrdrr\brdrnone\trbrdrh\brdrnone\trbrdrv\brdrnone\trgaph0\clpadft3\clpadt75\clpadfr3\clpadr75\clpadfl3\clpadl0\clpadfb3\clpadb0\tsvertalt\ltrch\i0\b0\strike0\ulnone\sl276\slmult1\sa180 TableNormal;}{\*\ts3\tsrowd\sbasedon2\sqformat\trbrdrt\brdrs\brdrw15\brdrcf0\trbrdrb\brdrs\brdrw15\brdrcf0\trbrdrl\brdrs\brdrw15\brdrcf0\trbrdrr\brdrs\brdrw15\brdrcf0\trbrdrh\brdrs\brdrw15\brdrcf0\trbrdrv\brdrs\brdrw15\brdrcf0\trgaph0\clpadft3\clpadt75\clpadfr3\clpadr75\clpadfl3\clpadl0\clpadfb3\clpadb0\tsvertalt\ltrch\i0\b0\strike0\ulnone\sl240\slmult1 TableGrid;}{\s0\sqformat\ltrch\i0\b0\strike0\ulnone\sl276\slmult1\sa180 Normal;}{\s5\sbasedon0\slink4\snext0\sqformat\ltrch\fs28\i0\b\strike0\cf2\ulnone\sl276\slmult1\sb480 Heading 1;}{\*\cs4\additive\slink5\ltrch\fs28\i0\b\strike0\cf2\ulnone Heading 1 Char;}{\s7\sbasedon0\slink6\snext0\sqformat\ltrch\fs26\i0\b\strike0\cf2\ulnone\sl276\slmult1\sb200 Heading 2;}{\*\cs6\additive\slink7\ltrch\fs26\i0\b\strike0\cf2\ulnone Heading 2 Char;}{\s9\sbasedon0\slink8\snext0\sqformat\ltrch\i0\b\strike0\cf2\ulnone\sl276\slmult1\sb200 Heading 3;}{\*\cs8\additive\slink9\ltrch\i0\b\strike0\cf2\ulnone Heading 3 Char;}{\s11\sbasedon0\slink10\snext0\sqformat\ltrch\i\b\strike0\cf2\ulnone\sl276\slmult1\sb200 Heading 4;}{\*\cs10\additive\slink11\ltrch\i\b\strike0\cf2\ulnone Heading 4 Char;}{\s13\sbasedon0\slink12\snext0\sqformat\ltrch\i0\b0\strike0\cf2\ulnone\sl276\slmult1\sb200 Heading 5;}{\*\cs12\additive\slink13\ltrch\i0\b0\strike0\cf2\ulnone Heading 5 Char;}{\s15\sbasedon0\slink14\snext0\sqformat\ltrch\i\b0\strike0\cf2\ulnone\sl276\slmult1\sb200 Heading 6;}{\*\cs14\additive\slink15\ltrch\i\b0\strike0\cf2\ulnone Heading 6 Char;}{\s17\sbasedon0\slink16\snext0\sqformat\ltrch\i\b0\strike0\ulnone\sl276\slmult1\sb200 Heading 7;}{\*\cs16\additive\slink17\ltrch\i\b0\strike0\ulnone Heading 7 Char;}{\s19\sbasedon0\slink18\snext0\sqformat\ltrch\fs20\i0\b0\strike0\ulnone\sl276\slmult1\sb200 Heading 8;}{\*\cs18\additive\slink19\ltrch\fs20\i0\b0\strike0\ulnone Heading 8 Char;}{\s21\sbasedon0\slink20\snext0\sqformat\ltrch\fs20\i\b0\strike0\ulnone\sl276\slmult1\sb200 Heading 9;}{\*\cs20\additive\slink21\ltrch\fs20\i\b0\strike0\ulnone Heading 9 Char;}{\s22\sbasedon0\snext0\sqformat\ltrch\f1\fs18\i0\b\strike0\cf2\ulnone\sl240\slmult1\sa180 caption;}{\s23\sbasedon0\snext0\ltrch\i0\b0\strike0\ulnone\sl276\slmult1\sa100 toc 1;}{\s24\sbasedon0\snext0\ltrch\i0\b0\strike0\ulnone\sl276\slmult1\li220\lin220\sa100 toc 2;}{\s25\sbasedon0\snext0\ltrch\i0\b0\strike0\ulnone\sl276\slmult1\li440\lin440\sa100 toc 3;}{\s26\sbasedon0\snext0\ltrch\i0\b0\strike0\ulnone\sl276\slmult1\li660\lin660\sa100 toc 4;}{\s27\sbasedon0\snext0\ltrch\i0\b0\strike0\ulnone\sl276\slmult1\li880\lin880\sa100 toc 5;}{\s28\sbasedon0\snext0\ltrch\i0\b0\strike0\ulnone\sl276\slmult1\li1100\lin1100\sa100 toc 6;}{\s29\sbasedon0\snext0\ltrch\i0\b0\strike0\ulnone\sl276\slmult1\li1320\lin1320\sa100 toc 7;}{\s30\sbasedon0\snext0\ltrch\i0\b0\strike0\ulnone\sl276\slmult1\li1540\lin1540\sa100 toc 8;}{\s31\sbasedon0\snext0\ltrch\i0\b0\strike0\ulnone\sl276\slmult1\li1760\lin1760\sa100 toc 9;}{\s32\sbasedon0\snext0\ltrch\i0\b0\strike0\ulnone\sl276\slmult1 table of figures;}{\*\cs33\additive\sqformat\ltrch\i0\b0\strike0\cf3\ulc3\ul Hyperlink;}}\nouicompat\viewkind4\paperw12240\paperh15840\margl1425\margr1425\margt1425\margb1425\deftab720\sectd\pgwsxn12240\pghsxn15840\marglsxn1425\margrsxn1425\margtsxn1425\margbsxn1425\headery720\footery720\pard\s0\ltrpar\sl276\slmult1\sa180{\ltrch\i0\b0\strike0\ulnone\par}}

The problem is that my client wants this data saved in a legacy database where the lengh of the data is restricted. With the tags generated by the new version, in the best case scenario, it severely restricts the amount of actual text that can be entered by the users, while in the worst case scenario the tags themselves are enough to exceed the restrictions.

Is there any way I could limit the amount of tags that are generated by default? Anything nearing what was generated by our former version 2011.3.1116.35 would be ideal.

If it can't be done, any other suggestion would also be welcome, knowing that :

I have no choice but to use RtfFormatProvider
The restrictions on the legacy database can't be changed in any way
Data can be restricted to as few as 2000 characters

Thank you!

RichTextBox

answered on 26 Apr 2013

1 answer

161 views

Move away from RadRibbonBackstageItem when clicking on a button in a MRU list

Hello there

I am using the Office_BlueTheme and I am using the new RadRibbonBackstageItem.

I want to move away from the BackstageItem when I click on a MRU item. Basically I want the same behavior as when IsSelectable="False"

Is there a way to manual switch to the default tab?

This is my MRU template:

<telerik:RadRibbonBackstageItem Header="Recent" IsDefault="True">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<StackPanel Margin="15 15 0 0">

<TextBlock Margin="0 0 0 2" FontSize="14" FontWeight="Bold" Text="Recent Documents" />

<Rectangle Height="1">

<Rectangle.Fill>

<LinearGradientBrush MappingMode="Absolute" SpreadMethod="Repeat"

StartPoint="0,0.5" EndPoint="4,0.5">

<GradientStop Offset="0" Color="#40000000" />

<GradientStop Offset="0.5" Color="#40000000" />

<GradientStop Offset="0.501" Color="Transparent" />

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<ItemsControl Margin="0 4 0 0">

<ListView ItemsSource="{Binding Path=MruList}" SelectionMode="Single" BorderThickness="0">

<ListView.ItemTemplate>

<DataTemplate>

<telerik:RadRibbonButton Content="{Binding Name}"

Command="{Binding DataContext.OpenFromMruCommand,

RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ItemsControl}}"

CommandParameter="{Binding}"

HorizontalAlignment="Stretch"/>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</ItemsControl>

</StackPanel>

</Grid>

</telerik:RadRibbonBackstageItem>

RibbonView and RibbonWindow

answered on 26 Apr 2013

3 answers

100 views

Can you change the position where the next character is input programmatically?

I've got a RadMaskedDateTimeInput control that I use in a UserControl in my application. My UserControl consists of the RadMaskedDateTimeInput control and two RepeatButtons:

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<telerik:RadMaskedDateTimeInput Focusable="True"

Grid.Column="0"

FormatString="{Binding Path=Mask, Mode=OneWay}"

HorizontalAlignment="Stretch"

HorizontalContentAlignment="Right"

InputBehavior="Insert"

IsClearButtonVisible="False"

Margin="5"

Mask="{Binding Path=Mask, Mode=OneWay}"

Name="ValueBox"

SelectionOnFocus="CaretToEnd"

SpinMode="PositionAndValue"

TextMode="MaskedText"

UpdateValueEvent="PropertyChanged"

Value="{Binding Converter={StaticResource TimeSpanConverter}, Path=Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"

VerticalAlignment="Center" />

<RepeatButton Click="IncrementButton_Click"

Focusable="False"

Grid.Column="1"

IsTabStop="False"

Name="IncrementButton">

<Image>

<Image.Style>

<Style TargetType="{x:Type Image}">

<Setter Property="Source"

Value="/CustomControls;component/Resources/VolumeUpDay.png" />

<Style.Triggers>

<MultiDataTrigger>

<MultiDataTrigger.Conditions>

<Condition Binding="{Binding ElementName=IncrementButton, Path=IsEnabled}" Value="false" />

<Condition Binding="{Binding Path=TimeOfDayMode, RelativeSource={RelativeSource AncestorType={x:Type cs:TimeSpanSpinner}}}" Value="DayTime" />

</MultiDataTrigger.Conditions>

<Setter Property="Source" Value="/CustomControls;component/Resources/VolumeUpDisabledDay.png" />

</MultiDataTrigger>

<MultiDataTrigger>

<MultiDataTrigger.Conditions>

<Condition Binding="{Binding ElementName=IncrementButton, Path=IsEnabled}" Value="true" />

<Condition Binding="{Binding Path=TimeOfDayMode, RelativeSource={RelativeSource AncestorType={x:Type cs:TimeSpanSpinner}}}" Value="NightTime" />

</MultiDataTrigger.Conditions>

<Setter Property="Source" Value="/CustomControls;component/Resources/VolumeUpNight.png" />

</MultiDataTrigger>

<MultiDataTrigger>

<MultiDataTrigger.Conditions>

<Condition Binding="{Binding ElementName=IncrementButton, Path=IsEnabled}" Value="false" />

<Condition Binding="{Binding Path=TimeOfDayMode, RelativeSource={RelativeSource AncestorType={x:Type cs:TimeSpanSpinner}}}" Value="NightTime" />

</MultiDataTrigger.Conditions>

<Setter Property="Source" Value="/CustomControls;component/Resources/VolumeUpDisabledNight.png" />

</MultiDataTrigger>

</Style.Triggers>

</Style>

</Image.Style>

</Image>

</RepeatButton>

<RepeatButton Click="DecrementButton_Click"

Focusable="False"

Grid.Column="2"

IsTabStop="False"

Name="DecrementButton">

<Image>

<Image.Style>

<Style TargetType="{x:Type Image}">

<Setter Property="Source"

Value="/CustomControls;component/Resources/VolumeDnDay.png" />

<Style.Triggers>

<MultiDataTrigger>

<MultiDataTrigger.Conditions>

<Condition Binding="{Binding ElementName=DecrementButton, Path=IsEnabled}" Value="false" />

<Condition Binding="{Binding Path=TimeOfDayMode, RelativeSource={RelativeSource AncestorType={x:Type cs:TimeSpanSpinner}}}" Value="DayTime" />

</MultiDataTrigger.Conditions>

<Setter Property="Source" Value="/CustomControls;component/Resources/VolumeDnDisabledDay.png" />

</MultiDataTrigger>

<MultiDataTrigger>

<MultiDataTrigger.Conditions>

<Condition Binding="{Binding ElementName=DecrementButton, Path=IsEnabled}" Value="true" />

<Condition Binding="{Binding Path=TimeOfDayMode, RelativeSource={RelativeSource AncestorType={x:Type cs:TimeSpanSpinner}}}" Value="NightTime" />

</MultiDataTrigger.Conditions>

<Setter Property="Source" Value="/CustomControls;component/Resources/VolumeDnNight.png" />

</MultiDataTrigger>

<MultiDataTrigger>

<MultiDataTrigger.Conditions>

<Condition Binding="{Binding ElementName=DecrementButton, Path=IsEnabled}" Value="false" />

<Condition Binding="{Binding Path=TimeOfDayMode, RelativeSource={RelativeSource AncestorType={x:Type cs:TimeSpanSpinner}}}" Value="NightTime" />

</MultiDataTrigger.Conditions>

<Setter Property="Source" Value="/CustomControls;component/Resources/VolumeDnDisabledNight.png" />

</MultiDataTrigger>

</Style.Triggers>

</Style>

</Image.Style>

</Image>

</RepeatButton>

</Grid>

Here is the code that gets executed when the user clicks on either of the two RepeatButtons:

private void DecrementButton_Click( object sender, RoutedEventArgs e ) {

ValueBox.CallSpin( false );

}

private void IncrementButton_Click( object sender, RoutedEventArgs e ) {

ValueBox.CallSpin( true );

}

The Mask that I'm using for the control in this application is "HH:mm:ss.fff". The control is used in an application that runs on a laptop with a touch screen. It's intended for use in a police car while the officer is driving, so the controls are all big to make it easy for officers with sausage fingers to use. One button has an arrow pointing up and the other has an arrow pointing down. The idea is that touching either button causes the spin functionality of the RadMaskedTimeDateInput control to fire.

My problem is that if the user clicks on either button without touching on anything in the RadMaskedDateTimeInput control first, the control wants to spin the "HH" part of the DateTime value. I'd prefer it if the control would spin the ".fff" part in this situation instead. But there doesn't seem to be a way to programmatically specify where the input position is in the control.

How can I make this work?

MaskedInput (Numeric, DateTime, Text, Currency)

answered on 26 Apr 2013

1 answer

144 views

Simple Basic D&D

Hi,

I play around with DDManager and my desired solution is:
I have a grid - in this Grid I have several Controls - all of them have a DataContext and also an interface "you can drop on me".
Further I have a Viewmodell (DC of the grid) which knows about these Items.

My first approach (just to see how it works) resulted in a Grid where I can drag my items (I get a visual copy of them when dragging).
-- By the way - by playing around I lost this (nice) ability to drag "my item" without the need to provide a template.

Anyhow - I got stuck here.

What I need (and hopefully can approach with DragDropManager) is:
Drag my Control within the bounds of my Grid
Showing a "Disabled" when dragged outside of my Grid (app)
Showing a "Disabled" when dragged over certain items (the container as well a the target can provide the "you can drop" information.
And last not least - when dropped I need (of course) the dragged Item and the Item where the user dropped it on.

No need for "List-Remove" or something like this - just X dropped on Y.

Is DragDropManager usable for this approach or shall I better use WPF default D&D?
The application is built on MVVM - so no code behind in the Control / Window would be nice.

Thanks
Manfred

DragAndDrop

answered on 26 Apr 2013

2 answers

294 views

Can not Clear ListBox.Items

Hello,

I try to delete / clear the Items of a Listbox with

Me.datarowExtList.Clear()

But i get an NullReferenceException, since there are some Elements in the Listbox

I bind a ObservableCollection to the Itemsource Property of the LIstbox:

ItemsSource="{Binding datarowExtList}" SelectionMode="Single" DisplayMemberPath="DocDescription"

Private _datarowExtList As ObservableCollection(Of DataRowExt) = New ObservableCollection(Of DataRowExt)

Public Property datarowExtList() As ObservableCollection(Of DataRowExt)

Get

Return _datarowExtList

End Get

Set(ByVal value As ObservableCollection(Of DataRowExt))

_datarowExtList = value

NotifyPropertyChanged("datarowExtList")

End Set

End Property

so - as i said, if there are no items in the Listbox shown up (ListBox.Items.Count = 0) i can do the Clear of the ObservableCollection.
But if there are any Items in the Listbox (just visual, neither in ListBox.Items or neither in my ObservableCollection) i get the NullReferenceException, on the Line of the ObservableCollection.CLear()

Whats wrong with the Listbox? what am i missing or doing wrong?

thanks for any advice

regards
Mike

ListBox

answered on 26 Apr 2013

1 answer

78 views

How to check if RadTileView's item collection has changed (add/remove items)?

Hi!

I could not find any event that is fired when I add or remove items from RadTileView's itemsource. I want to be able to save user's tile positions after adding or removing tiles so is there any event that is fired when the collection changes?

Br,

Kalle

TileView

answered on 26 Apr 2013