Questions on UI for WPF Forum

3 answers

139 views

Keyboard Command Provider on Child Table

I have several GridViews on my interface and then on one it has a ChildTableDefinition. I am trying to have the TAB key insert a row if pressed on the end of the last line on each GridView. I have followed the instructions and created the KeyboardCommandProvider that overrides the ProvideCommandsForKey method. I have then wired up the KeyboardCommandProvider in the code behind

myGrid1.KeyboardCommandProvider = new Commands.TabKeyCommandProvider(myGrid1);

however the definition for my Child Table is done via a DataTemplate

<telerik:RadGridView.ChildTableDefinitions>
<telerik:GridViewTableDefinition />
</telerik:RadGridView.ChildTableDefinitions>
<telerik:RadGridView.HierarchyChildTemplate>
<DataTemplate>
<telerik:RadGridView ItemsSource="{Binding custom_identifier}"
x:Name="ChildGrid1"
ShowGroupPanel="False"
AutoGenerateColumns="False">
<telerik:RadGridView.Columns>
<telerik:GridViewDataColumn DataMemberBinding="{Binding label}"
Header="Custom Identifier"
IsSortable="True"
IsFilterable="False" />
</telerik:RadGridView.Columns>
</telerik:RadGridView>
</DataTemplate>
</telerik:RadGridView.HierarchyChildTemplate>

Now as this child Grid is defined in a template, I can not reference it using the x:Name of "ChildGrid1" in the code behind. So how do I attach the custom Command Provider to this grid?

Also - is there an MVVM way of doing this as doing it in Code Behind is not ideal ??

Any suggestions welcome

GridView

answered on 06 Nov 2017

1 answer

549 views

Control Behaviors With Data Trigger

I have a chart that has two plots on it. I also have a ribbon bar with a few buttons that I'd like to use to control the pan and zoom behaviors of the chart. I'd like to accomplish this exclusively in the XAML file using data triggers. Please excuse the long code snip, but I'd like to provide a complete picture.

001.<Grid>

002. <TabControl ItemsSource="{Binding TotalGradeProfile}">

003.

004. <TabControl.ItemTemplate>

005. <DataTemplate>

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

007. </DataTemplate>

008. </TabControl.ItemTemplate>

009.

010. <TabControl.ContentTemplate>

011. <DataTemplate>

012. <Grid>

013. <Grid.RowDefinitions>

014. <RowDefinition Height="Auto"/>

015. <RowDefinition Height="*"/>

016. </Grid.RowDefinitions>

017.

018. <Grid.ColumnDefinitions>

019. <ColumnDefinition Width="*"/>

020. <ColumnDefinition Width="Auto"/>

021. </Grid.ColumnDefinitions>

022.

023. <Ribbon Grid.Row="0"

024. Grid.ColumnSpan="2">

025.

026. <RibbonTab Header="Home" KeyTip="H">

027. <RibbonGroup x:Name="ZoomAndPanGroup"

028. Header="Zoom and Pan">

029.

030. <RibbonButton Label="Zoom"

031. Name="zoomButton"/>

032.

033. <RibbonButton Label="Pan"

034. Name="panButton"/>

035. </RibbonGroup>

036. </RibbonTab>

037. </Ribbon>

038.

039. <telerik:RadCartesianChart x:Name="gradePlot"

040. Grid.Row="1"

041. Grid.Column="0"

042. Margin="2">

043.

044. <telerik:RadCartesianChart.Behaviors>

045. <telerik:ChartTrackBallBehavior ShowIntersectionPoints="True"

046.

ShowTrackInfo="True"

047.

SnapMode="AllClosePoints"/>

048.

049. <telerik:ChartPanAndZoomBehavior ZoomMode="Both"

050.

PanMode="None"

051.

x:Name="zoomBehavior"/>

052.

053. </telerik:RadCartesianChart.Behaviors>

054.

055. <telerik:RadCartesianChart.HorizontalAxis>

056. <telerik:LinearAxis SmartLabelsMode="SmartStepAndRange"

057. IsStepRecalculationOnZoomEnabled="True"

058. RangeExtendDirection="None"/>

059. </telerik:RadCartesianChart.HorizontalAxis>

060.

061. <telerik:RadCartesianChart.VerticalAxis>

062. <telerik:LinearAxis SmartLabelsMode="SmartStepAndRange"

063. IsStepRecalculationOnZoomEnabled="True"

064. RangeExtendDirection="None"/>

065. </telerik:RadCartesianChart.VerticalAxis>

066.

067. 

068. <telerik:ScatterSplineSeries XValueBinding="Mp"

069. YValueBinding="RegionGrade"

070. ItemsSource="{Binding GradeProfiles}"

071. Stroke="Blue"

072. StrokeThickness="1">

073.

074. <telerik:ScatterSplineSeries.LegendSettings>

075. <telerik:SeriesLegendSettings Title="Region"/>

076. </telerik:ScatterSplineSeries.LegendSettings>

077.

078. <telerik:ScatterSplineSeries.TrackBallInfoTemplate>

079. <DataTemplate>

080. <StackPanel Orientation="Vertical">

081. <TextBlock Text="{Binding DataPoint.XValue, StringFormat=Milepost: {0}}"/>

082. <TextBlock Text="{Binding DataPoint.YValue, StringFormat=Region Grade: {0:0.000}}"

083. Foreground="Blue"/>

084. </StackPanel>

085. </DataTemplate>

086. </telerik:ScatterSplineSeries.TrackBallInfoTemplate>

087.

088. <telerik:ScatterSplineSeries.RenderOptions>

089. <telerik:BitmapRenderOptions/>

090. </telerik:ScatterSplineSeries.RenderOptions>

091.

092. </telerik:ScatterSplineSeries>

093.

094. 

095. <telerik:ScatterSplineSeries XValueBinding="Mp"

096. YValueBinding="SubdivGrade"

097. ItemsSource="{Binding GradeProfiles}"

098. Stroke="Red"

099. StrokeThickness="1">

100.

101. <telerik:ScatterSplineSeries.LegendSettings>

102. <telerik:SeriesLegendSettings Title="Subdivision"/>

103. </telerik:ScatterSplineSeries.LegendSettings>

104.

105. <telerik:ScatterSplineSeries.TrackBallInfoTemplate>

106. <DataTemplate>

107. <TextBlock Text="{Binding DataPoint.YValue, StringFormat=Subdivision Grade: {0:0.000}}"

108. Foreground="Red"/>

109. </DataTemplate>

110. </telerik:ScatterSplineSeries.TrackBallInfoTemplate>

111.

112. <telerik:ScatterSplineSeries.RenderOptions>

113. <telerik:BitmapRenderOptions/>

114. </telerik:ScatterSplineSeries.RenderOptions>

115.

116. </telerik:ScatterSplineSeries>

117. </telerik:RadCartesianChart>

118.

119. <telerik:RadLegend Items="{Binding LegendItems, ElementName=gradePlot}"

120. BorderBrush="Black"

121. BorderThickness="1"

122. HorizontalAlignment="Right"

123. VerticalAlignment="Top"

124. Margin="0, 0, 2, 0"

125. Grid.Row="1"

126. Grid.Column="0"

127. Background="White"/>

128.

129. <DataGrid Grid.Row="1"

130. Grid.Column="1"

131. ItemsSource="{Binding GradeProfiles}"

132. AutoGenerateColumns="True"

133. IsReadOnly="True">

134. </DataGrid>

135. </Grid>

136.

137. <DataTemplate.Triggers>

138. <DataTrigger Binding="{Binding ElementName=panButton, Path=IsToggle}"

139. Value="True">

140. <Setter TargetName="zoomBehavior"

141. Property="ZoomMode"

142. Value="None"/>

143. <Setter TargetName="zoomBehavior"

144. Property="PanMode"

145. Value="Both"/>

146. </DataTrigger>

147. </DataTemplate.Triggers>

148. </DataTemplate>

149. </TabControl.ContentTemplate>

150. </TabControl>

151. </Grid>

ChartView

answered on 06 Nov 2017

4 answers

250 views

Incorrect mouse cursor when drop down list is displayed

Hello Team,

I am facing one issue while using RadAutoCompleteBox. Wrong mouse cursor is displayed when we type any text in the text box and list is shown.

Please refer attached screen shot for your reference.

Please let me know if you need any details futher.

Thanks,

Ganesh Sahastrabuddhe

AutoCompleteBox

answered on 06 Nov 2017

0 answers

145 views

Capital letters are not displayed in the textbox

Hello Team,

Using RadAutoComplete textbox, we are tying to achieve functionality similar to Google search.

We are facing one issue with capital letters.

When we are typing capital letter which is present in the list, the letters are not shown in Capital case, rather they are shown in small case.

I have attached videos, one is of Google, the functionality which we are tying to achieve and second is of the issue. Attached files are jpg, please rename those to mp4.

Thanks,

Ganesh Sahastrabuddhe

AutoCompleteBox

asked on 06 Nov 2017

4 answers

391 views

How to prevent connection lines overlaps ?

Hello,

I am working on a diagram generator which I would like to make every connection path very obvious using AStarRouter. But the problem I have is connections lines overlaps in some scenarios and I have no control preventing them. See the attached CurrentResult.jpg. I would like to prevent them overlapping as the ExpectedResult.jpg

Thanks in advanced!

Diagram

answered on 03 Nov 2017

6 answers

182 views

Customized TreeView with different connecting lines and on-demand expansion feature

Hi,

I am working on some requirement where I have hierarchical data(attached sample XML) to represent in a tree view(almost like tree view, attached sample) with customizing lines between the nodes and on-demand expansion/collapse features. I am new to WPF UI, please help me kick start my implementation by providing a sample project with the attached samples as reference. Thanks in advance.

</system>
</root>

Thanks,

Cha

TreeView

answered on 03 Nov 2017

1 answer

75 views

Unable to view images

Hi,
I have an object data source which is returning among other things, a list of bitmap images. I can see this object in the Data Explorer plain. They are however a vast array of properties from which to choose from, but no actual image. For example, DpiX, DpiY, Width, Height, but no actual image from which I can drag and drop onto my picture box. I can't find any online examples on how to do so. The applications intended use should populate the report with an array of images when clicked on from a wpf desktop application. Can anybody point me in the correct direction, perhaps with some screenshots or examples? Thanks in advance.

Kind regards,
David

General Discussions

answered on 03 Nov 2017

1 answer

200 views

Trouble viewing images

Hi,

I have an object data source which is returning among other things, a list of bitmap images. I can see this object in the Data Explorer plain. They are however a vast array of properties from which to choose from, but no actual image. For example, DpiX, DpiY, Width, Height, but no actual image from which I can drag and drop onto my picture box. I can't find any online examples on how to do so. The applications intended use should populate the report with an array of images when clicked on from a wpf desktop application. Can anybody point me in the correct direction, perhaps with some screenshots or examples. Thanks in advance.

Kind regards,

David

ImageEditor

answered on 03 Nov 2017

7 answers

994 views

GridViewCell styling based on the property of the cell's value

The items shown in my grid have properties of the type

public class CheckerProperty

{

...

public object Value { get; private set; }

public bool Changed { get; private set; }

}

(So there is an itm.Status property of type CheckerProperty and a itm.Diameter of type CheckerProperty etc.) The Value should be shown, and when the Changed property is true, the background should have a different colour.

Since there are a lot of diferent properties and I would like to have a single style that handles the background change. Something like:

<Style x:Key="stlChangeCheckerProp" TargetType="telerik:GridViewCell" BasedOn="{StaticResource GridViewCellStyle}">

<Setter Property="telerik:GridViewCell.Background" Value="Transparent" />

<Style.Triggers>

<DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self}}" Value="True">

<Setter Property="telerik:GridViewCell.Background" Value="{StaticResource brChange}" />

</DataTrigger>

</Style.Triggers>

</Style>

I'm struggling with the binding. How can I bind to the Changed property of the cell's value? It seems when I use RelativeSource, as in this example, I get the GridViewCell itself. When I use no RelativeSource, I get the item itself and I don't know which property (Status, Diameter etc.) is being displayed.

How can I set up the binding correctly?

GridView

answered on 03 Nov 2017

4 answers

348 views

RowSpan problem

Is there a problem with RowSpan support in RadAutoCompleteBox class? The vertical scroll bar doesn't seem to extend all the way.

Try this out with your "Highlight Matching Items Text" example in your samples browser software.

Add new row to the grid:

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

Then set RadAutoCompleteBox object's RowSpan to 2:

Grid.RowSpan="2"

Then subscribe to Loaded event in Example.xaml.cs:

public Example()

{

InitializeComponent();

AutoComplete.Loaded += AutoComplete_Loaded;

}

private void AutoComplete_Loaded(object sender, RoutedEventArgs e)

{

RadWatermarkTextBox watermark = (sender as RadAutoCompleteBox).ChildrenOfType<RadWatermarkTextBox>().FirstOrDefault();

if (watermark != null)

{

watermark.AcceptsReturn = true;

watermark.TextWrapping = TextWrapping.Wrap;

watermark.VerticalAlignment = VerticalAlignment.Center;

watermark.VerticalScrollBarVisibility = ScrollBarVisibility.Visible;

}

Then run the example and you see how the scroll bar is only the height of the first row. It grows when you type text with new rows. Doesn't look good if you want to always show the vertical scroll bar (disabled when not enough text to scroll).

Haven't tested this with horizontal scroll bar.

By the way, is there a way to configure the RadAutoCompleteBox object to use textwrapping in XAML. I only found the above way by googling and I'd like not to use events. Handled with extending the class and subscribing to the event in the extended class' code.

AutoCompleteBox

answered on 01 Nov 2017