Questions on UI for WPF Forum

3 answers

215 views

Thema aware styling with connectors

Hi,

I want to style a diagram shape so I use VS2012 which generates me the following style.

<Style x:Key="RadDiagramShapeStyle1" TargetType="{x:Type telerik:RadDiagramShape}">

<Setter Property="Foreground" Value="#FF333333"/>

<Setter Property="Background">

<Setter.Value>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFFB356" Offset="1"/>

<GradientStop Color="#FFFFDEDE"/>

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

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter Property="BorderBrush" Value="#FFB84600"/>

<Setter Property="FontSize" Value="11"/>

<Setter Property="ZIndex" Value="2"/>

<Setter Property="BorderThickness" Value="0"/>

<Setter Property="StrokeThickness" Value="1"/>

<Setter Property="Padding" Value="4"/>

<Setter Property="StrokeDashArray" Value="1 0"/>

<Setter Property="FocusVisualStyle" Value="{x:Null}"/>

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

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

<Setter Property="Geometry" Value="M0,0L60,0 60,40 0,40z"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type telerik:RadDiagramShape}">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="MouseStates">

<VisualState x:Name="Normal"/>

<VisualState x:Name="MouseOver"/>

</VisualStateGroup>

<VisualStateGroup x:Name="ActiveConectionStates">

<VisualState x:Name="NormalActiveConnectionState"/>

<VisualState x:Name="ActiveConnectionInsideShape">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ActiveSelectedBorder">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="ConnectorsAdornerVisibilityStates">

<VisualState x:Name="ConnectorsAdornerCollapsed"/>

<VisualState x:Name="ConnectorsAdornerVisible">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ConnectorsControl">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="SelectionStates">

<VisualState x:Name="Selected"/>

<VisualState x:Name="SelectedInGroup">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SelectedBorder">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Unselected"/>

<VisualState x:Name="SelectedAsGroup"/>

</VisualStateGroup>

<VisualStateGroup x:Name="EditMode">

<VisualState x:Name="NormalMode"/>

<VisualState x:Name="NormalEditMode">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="NormalContent">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EditContent">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="TextBoxEditMode">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="NormalContent">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EditTextBox">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid>

<Path x:Name="Geometry" Data="{TemplateBinding Geometry}" Fill="{TemplateBinding Background}" Opacity="{TemplateBinding Opacity}" Stretch="Fill" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding StrokeThickness}" StrokeDashArray="{TemplateBinding StrokeDashArray}"/>

<Border x:Name="SelectedBorder" BorderBrush="#FFADD6FF" BorderThickness="1" Visibility="Collapsed"/>

<Border x:Name="ActiveSelectedBorder" BorderBrush="#7FC92931" BorderThickness="2" Visibility="Collapsed"/>

<ContentPresenter x:Name="NormalContent" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" telerik:DiagramBehaviors.TextWrapping="Wrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

<Primitives:ConnectorsControl x:Name="ConnectorsControl" ItemContainerStyle="{TemplateBinding ConnectorStyle}" Visibility="Collapsed"/>

</Grid>

<Grid x:Name="PART_RotationalPart">

<ContentPresenter x:Name="EditContent" ContentTemplate="{TemplateBinding EditTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

<TextBox x:Name="EditTextBox" AcceptsReturn="True" Visibility="Collapsed">

<TextBox.Style>

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

<Setter Property="TextWrapping" Value="Wrap"/>

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

<Setter Property="FontSize" Value="11"/>

<Setter Property="FontFamily" Value="Segoe UI"/>

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

<Setter Property="HorizontalAlignment" Value="Stretch"/>

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

<Setter Property="Margin" Value="5"/>

<Setter Property="Padding" Value="2"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type TextBox}">

<Grid x:Name="RootElement">

<Rectangle Fill="White" Stroke="#FF767676" StrokeDashArray="3 3" UseLayoutRounding="True"/>

<ScrollViewer x:Name="PART_ContentHost" BorderThickness="0" Background="Transparent" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">

<telerik:StyleManager.Theme>

<telerik:Office_BlackTheme/>

</telerik:StyleManager.Theme>

</ScrollViewer>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</TextBox.Style>

</TextBox>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

This style works "somehow" but when I use it on a diagramshape and select the shape at runtime I no longer have the "connectors adorner".

Furthermore (I think this is a more common problem) I'm no longer theme aware.
I set my theme at runtime - "unstyled" controls change their appearance - but styled ones do not.

The primary problem is that I want to change some behaviour and need to style the control - without loosing the connector adorner.

Manfred

Diagram

answered on 22 Jul 2013

3 answers

145 views

Limit drop to existing Nodes

Hi,

my approach (using MVVM) is something like your "OrgChart" example.

Assume this example, where you start with the CEO predefined.
Then from a list the user can drag employees to the chart.
Employees can change their position (by being dragged to a different "chief / leader").
Every Employee is assigned to another one.
There are kind of employees which may not "rule" others (let's say trainees). These employees can't act as "drop destination"

So the rules are:
- One node is fixed (CEO)
- the user must drop the new / existing Node on an existing one
- depending on the node type dropping is enabled or not (Visual feedback should be provided - like containers do)

After a drop operation I recalculate the Org-Model add / remove connectors and redraw the chart.

Is there an easy way to achieve this?

Manfred

Diagram

answered on 22 Jul 2013

1 answer

132 views

Re-template control, loss radTickBar

hi

I used Blend 2012, when I retemplate the control (without doing anything to the generated style) i loss the top left radTickBar

attached image of it working, not working and code (not working but remove style={} and it works)

I am using 2012.3.1017.40

thanks
martin

     <telerik1:RadSlider Height="100"
   HandlesVisibility="Visible"
   TickPlacement="TopLeft"
   TickFrequency="1"
   IsSnapToTickEnabled="True"
   SelectionStart="0"
   SelectionEnd="21"
   MinimumRangeSpan="1"
   Minimum="0"
   SmallChange="1"
   LargeChange="1"
   Maximum="21"
   IsSelectionRangeEnabled="True" Style="{DynamicResource NotWorkingStyle}" >
   <telerik1:RadSlider.TickTemplate>
    <DataTemplate>
     <Grid>
      <TextBlock Text="{Binding}" FontSize="11"/>
     </Grid>
    </DataTemplate>
   </telerik1:RadSlider.TickTemplate>
  </telerik1:RadSlider>

Slider

answered on 22 Jul 2013

3 answers

61 views

Selecting related items when a single item is selected

Hi

My application tracks "items", when they arrive they're placed into an area and my timeline shows a span from when they arrive to when they leave.

I group my timeline objects using the AreaName property. An item can be moved between areas, when an item is moved the span stops in the first area and a new span is created in the new area.

What I want to do is highlight the whole history of the item when any of the sectors is selected. I.e. select the spans in areas "a", "b" and "c" for item "x" in the different area groups when the item is selected in area "a"

I hope this makes sense.
Thanks
Ben

TimeLine

answered on 22 Jul 2013

3 answers

759 views

Data binding SelectedItems property

How do I databind the SelectedItems property? I'm just getting the following compilation error and can't find any examples of how it's done in the documentation

The property "SelectedItems" does not have an accessible setter.

TimeLine

answered on 22 Jul 2013

1 answer

116 views

Hosting WinForms in RadPane

We have an existing WinForms app that we would like to migrate to WPF using your WPF support. The plan was to implement the main app (including docking) in WPF and then embed the existing WinForms controls into it until we get around to rewriting them using WPF. This seems to work reasonably well until we float one of the panes. Then the WinForms control is not rendered. If we dock it back again the control shows up. From what I can tell on the Forums this is/was a known issue. Should this now be possible?

Thanks
Dave Goughnour

Docking

answered on 22 Jul 2013

4 answers

154 views

ChartArea Template3D

Hi

We are looking at using Telerik charts to replace an older WinForms charting widget, and we need to maintain backwards compatibility in order to maintain the correct look and feel. Our previous charting widgets heavily supported 3D charting, but Telerik's 3D charts are not particularly similar in visual style to the ones we are looking to replace. I have been looking at ChartArea, and have noticed that there is a Template3D that is used to dictate how the 3D charts are set up visually, and this would be perfect to use for what we want to do. In attempting to create a custom style in order to specify our own Template3D, I have been running into a few problems. Currently, I have a ChartArea style that specifies our custom Template3D, which I have pulled from looking at the default Template3D normally used:

<Style x:Key="defaultAreaStyle" TargetType="c:ChartArea">

<Setter Property="Template3D">

<Setter.Value>

<ControlTemplate TargetType="c:ChartArea">

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

<ItemsPresenter/>

<Grid x:Name="PART_Container"/>

<c:ViewportPanel x:Name="PART_CameraExtensionCanvas">

<Viewport3D x:Name="PART_ViewPort3D">

<Viewport3D.Camera>

<PerspectiveCamera LookDirection="0.2,-0.23,-1" Position="-40,37.5,195"/>

</Viewport3D.Camera>

<ModelVisual3D>

<ModelVisual3D.Content>

<Model3DGroup>

<AmbientLight Color="#FF606060"/>

<DirectionalLight Color="#FF989898" Direction="-0.5,-0.4,-1"/>

</Model3DGroup>

</ModelVisual3D.Content>

</ModelVisual3D>

<ContainerUIElement3D>

<ContainerUIElement3D.Transform>

<Transform3DGroup>

<TranslateTransform3D OffsetX="-50" OffsetY="-37.5"/>

</Transform3DGroup>

</ContainerUIElement3D.Transform>

<c:PlaneZX AdornerLayer="{x:Null}" Height="2" SecondaryTicksSource="{Binding AxisX.TickPoints, RelativeSource={RelativeSource TemplatedParent}}" SecondaryAxis3DPoints="0,0,10.1 100,0,10.1">

<c:PlaneZX.PositionTransform>

<TranslateTransform3D OffsetZ="0" OffsetX="0" OffsetY="-2"/>

</c:PlaneZX.PositionTransform>

</c:PlaneZX>

<c:PlaneXY AdornerLayer="{x:Null}" Depth="2" PrimaryTicksSource="{Binding AxisX.TickPoints, RelativeSource={RelativeSource TemplatedParent}}" SecondaryTicksSource="{Binding AxisY.TickPoints, RelativeSource={RelativeSource TemplatedParent}}">

<c:PlaneXY.PositionTransform>

<TranslateTransform3D OffsetZ="-2" OffsetX="0" OffsetY="0"/>

</c:PlaneXY.PositionTransform>

</c:PlaneXY>

<c:PlaneYZ AdornerLayer="{x:Null}" PrimaryTicksSource="{Binding AxisY.TickPoints, RelativeSource={RelativeSource TemplatedParent}}" PrimaryAxis3DPoints="0,0,10.1 0,75,10.1" Width="2">

<c:PlaneYZ.PositionTransform>

<TranslateTransform3D OffsetZ="0" OffsetX="-2" OffsetY="0"/>

</c:PlaneYZ.PositionTransform>

</c:PlaneYZ>

<c:ItemsPresenter3D/>

</ContainerUIElement3D>

</Viewport3D>

<c:LabelsControl x:Name="PART_LabelsControl" ClipToBounds="True">

<c:LabelsControl.ItemsPanel>

<ItemsPanelTemplate/>

</c:LabelsControl.ItemsPanel>

<c:LabelsControl.ItemTemplate>

<DataTemplate>

<c:LabelLayer>

<c:LabelLayer.ItemsPanel>

<ItemsPanelTemplate>

<c:LabelLayerItemsPanel IsItemsHost="True"/>

</ItemsPanelTemplate>

</c:LabelLayer.ItemsPanel>

<c:LabelLayer.ItemTemplate>

<DataTemplate>

<Border BorderBrush="#FF5C5C5C" BorderThickness="1" CornerRadius="3" LayoutTransform="{Binding Transform}">

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFCCCCCC" Offset="1"/>

<GradientStop Color="White"/>

</LinearGradientBrush>

</Border.Background>

<TextBlock Foreground="Black" FontWeight="Bold" HorizontalAlignment="Center" Margin="4,0">

<TextBlock.Text>

<Binding>

<Binding.Converter>

<c:LabelFormatConverter/>

</Binding.Converter>

</Binding>

</TextBlock.Text>

</TextBlock>

</Border>

</DataTemplate>

</c:LabelLayer.ItemTemplate>

</c:LabelLayer>

</DataTemplate>

</c:LabelsControl.ItemTemplate>

</c:LabelsControl>

</c:ViewportPanel>

<c:NoDataControl x:Name="PART_NoData" Style="{TemplateBinding NoDataControlStyle}"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

However, when I try to assign this style to the ChartArea of any 3D chart, I get a null reference exception in RadChart. The call stack gives the last few calls as:

Telerik.Windows.Controls.Charting.dll!Telerik.Windows.Controls.Charting.Series3D.ChartArea.get()
Telerik.Windows.Controls.Charting.dll!Telerik.Windows.Controls.Charting.Series3D.LabelsControl.get()
Telerik.Windows.Controls.Charting.dll!Telerik.Windows.Controls.Charting.Series3D.RemoveLabelLayer()

So my question is how do I properly set Template3D (if it even possible)?

Chart

answered on 22 Jul 2013

3 answers

231 views

RadGridView expand/collapse notification with virtualiing panel

When virtualizing is turned on, a group is collapsed when its out of visible area and expands if it needs to when it returned to the visible area. I need to display a count of all expanded groups for the user. How can I get the "actual" expand count from the RadGridView? Since the RadGridView is auto-expanded when they come back, it obviously knows whatn needs to be expanded.

GridView

answered on 22 Jul 2013

1 answer

180 views

Set QueryableEntityCollectionView with Subset of Data

Is there any means of setting the QueryableEntityCollectionView to a subset of data using a linq query or some other means?

For example the following code will include all recurds in tbUser

New QueryableEntityCollectionView(Of DataModelEF.tbUser)(DbContext, "tbUsers")

I only want active users to be included based on a flag. It's preferable if the user is blind to this filter in that the column on the grid doesn't show that it's been filtered.

I see that there is another constructer that uses ObjectQuery but I can't get my head around how this works and I can't seem to find any examples.

Any help is appreciated.

EntityFrameworkDataSource

answered on 22 Jul 2013

3 answers

150 views

DataFrom + DataGrid's SelectionChanged event issue

Hi Telerik,

I have an mvvm solution. In my viewmodel I have an QueryableCollectionView of the class "BaseClass" objects and an standalone "BaseClass" element(let's call it seletedElem). The "BaseClass" class have a private QueryableCollection of the "ChildClass" objects(let's call it SCollection), and a property that returns this collection. Both classes are implementing the following interfaces: INotifyPropertyChanged, IDataErrorInfo, IEditableObject. In my view I have raddatagrid which itemssource is binded to the ObservableCollection of "BaseClass" objects from viewmodel and selected item is binded to the standalone "BaseClass" object - selectedElem.

The Dataform is binded to the currently selected grid item in this way :

ItemsSource="{Binding ElementName=xxx,Path=DataContext.seletedElem.SCollection}"

Then before the first DataGrid's selection changed event, or after the new item is inserted to the grid, when I press add button of the raddataform the current item of the SCollection is always an empty item of type ChildClass, but after the grid's selection changed event(when one of the existing items is selected) the current item of the SCollection is always null and im not able to edit it's properties.

Is there anyway to fix this behaviour?

Regards,
Tomasz

DataForm

answered on 22 Jul 2013