Questions on UI for WPF Forum

1 answer

440 views

RadGridView scrolls to top for no obvious reason.

Hello,

I am using RadControls version 2012.2.607.40 for WPF 4.

I am having an issue with the scrolling of a RadGridView. The problem is that under certain circumstances, the RadGridView scrolls to the top for no apparent reason. The following xaml and code-behind show a simple sample:

<Window x:Class="RadGridViewScrollingSample.MainWindow"

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

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

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

xmlns:local="clr-namespace:RadGridViewScrollingSample"

x:Name="_this"

Title="MainWindow" Height="350">

<Window.Resources>

<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>

</Window.Resources>

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">

<TextBlock Text='Scroll down in the grid view below then move the mouse over "Place Mouse Here".'/>

<TextBlock Text="You will see the grid view automatically scroll to the top."/>

<TextBlock Text='Clicking in "Place Mouse Here" will scroll the last row of the grid view in to view, but'/>

<TextBlock Text='the grid view will again scroll to the top when the mouse is moved outside "Place Mouse Here".'/>

</StackPanel>

<telerik:RadGridView x:Name="gridView" Grid.Row="1" Grid.Column="0" ScrollViewer.VerticalScrollBarVisibility="Visible" ItemsSource="{Binding Path=Things}"/>

<TextBlock Grid.Row="1" Grid.Column="1" x:Name="placeholder" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" TextAlignment="Center" Text="Place Mouse Here" FontSize="40" MouseUp="OnMouseUp"/>

<DockPanel Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">

<TextBlock Text="This is placeholder text. "/>

<TextBlock Text='This text appears when the mouse is over "Place Mouse Here".' Visibility="{Binding ElementName=placeholder, Path=IsMouseOver, Converter={StaticResource BooleanToVisibilityConverter}}"/>

</DockPanel>

</Grid>

</Window>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

using System.Collections.ObjectModel;

using System.ComponentModel;

namespace RadGridViewScrollingSample

{

/// <summary>

/// Interaction logic for MainWindow.xaml

/// </summary>

public partial class MainWindow : Window

{

private ObservableCollection<Thing> things = new ObservableCollection<Thing>();

private string[] colors = new string[] { "red", "green", "blue", "orange", "purple" };

private string[] sizes = new string[] { "small", "medium", "large" };

public MainWindow()

{

InitializeComponent();

DataContext = this;

int i = 0;

for (char c = 'A'; c <= 'Z'; c++, i++)

{

things.Add(new Thing(c.ToString(), colors[i % colors.Length], sizes[i % sizes.Length]));

}

public ObservableCollection<Thing> Things

{

get { return things; }

}

private void OnMouseUp(object sender, MouseButtonEventArgs e)

{

gridView.ScrollIntoView(things.FirstOrDefault(t => t.Name == "Z"));

}

public class Thing

{

private string name;

private string color;

private string size;

public Thing(string name, string color, string size)

{

this.name = name;

this.color = color;

this.size = size;

}

public string Name

{

get { return name; }

}

public string Color

{

get { return color; }

}

public string Size

{

get { return size; }

}

If I scroll the RadGridView to the bottom and then move the mouse over the text "Place Mouse Here", the RadGridView scrolls to the top. If I then click the mouse over "Place Mouse Here", causing the RadGridView to scroll to the bottom, and then move the mouse outside the text "Place Mouse Here", the RadGridView again scrolls to the top. Note that placing the mouse over the text "Place Mouse Here" causes a TextBlock to become visible at the bottom of the screen.

I can stop this auto scrolling of the RadGridView by changing either or both the grid row height of * or grid column width of * to a fixed value. However, this is not an acceptable solution because I want those grid row and column to take all remaining space in the window.

I believe, but can't prove, that this behavior has something to do with a SizedChange event being fired when the TextBlock at the bottom of the window changes its visibility. But obviously in my case, no sizes are actually changing.

Can anybody tell me what is causing the unsolicited scrolling of my RadGridView and, better yet, how to avoid this behavior?

Thank you,

-- john

GridView

answered on 30 Jul 2012

1 answer

320 views

BindingExpression path error

In my ShellV, I have a CustomRegion:

   <telerik:RadDocking HasDocumentHost="True"
                            Grid.Row="3"
                            x:Name="MainRadDocking"
                            BorderThickness="0"
                            Margin="0"
                            Background="Transparent">
            <telerik:RadDocking.DocumentHost>
                <telerik:RadSplitContainer>
                    <telerik:RadPaneGroup prism:RegionManager.RegionName="MainPaneRegion"
                                           Name="MainDockingPanelGroup"/>
                </telerik:RadSplitContainer>
            </telerik:RadDocking.DocumentHost>
            <telerik:RadSplitContainer InitialPosition="DockedLeft">
                <telerik:RadPaneGroup prism:RegionManager.RegionName="LeftPaneRegion"
                                      Name="LeftDockingPanelGroup"/>
            </telerik:RadSplitContainer>
            <telerik:RadSplitContainer InitialPosition="DockedRight">
                <telerik:RadPaneGroup prism:RegionManager.RegionName="RightPaneRegion"
                                       Name="RightDockingPanelGroup"/>
            </telerik:RadSplitContainer>
        </telerik:RadDocking>

When I launch my application, I am getting 81 errors, here is a sample:

System.Windows.Data Information: 41 : BindingExpression path error: 'PaneHeaderVisibility' property not found for 'object' because data item is null. This could happen because the data provider has not produced any data yet. BindingExpression:Path=SelectedPane.PaneHeaderVisibility; DataItem='AutoHideArea' (Name='LeftAutoHide'); target element is 'PaneHeader' (Name=''); target property is 'Visibility' (type 'Visibility')

System.Windows.Data Information: 20 : BindingExpression cannot retrieve value due to missing information. BindingExpression:Path=SelectedPane.PaneHeaderVisibility; DataItem='AutoHideArea' (Name='LeftAutoHide'); target element is 'PaneHeader' (Name=''); target property is 'Visibility' (type 'Visibility')

System.Windows.Data Information: 21 : BindingExpression cannot retrieve value from null data item. This could happen when binding is detached or when binding to a Nullable type that has no value. BindingExpression:Path=SelectedPane.PaneHeaderVisibility; DataItem='AutoHideArea' (Name='LeftAutoHide'); target element is 'PaneHeader' (Name=''); target property is 'Visibility' (type 'Visibility')

System.Windows.Data Information: 10 : Cannot retrieve value using the binding and no valid fallback value exists; using default instead. BindingExpression:Path=SelectedPane.PaneHeaderVisibility; DataItem='AutoHideArea' (Name='LeftAutoHide'); target element is 'PaneHeader' (Name=''); target property is 'Visibility' (type 'Visibility')

System.Windows.Data Information: 41 : BindingExpression path error: 'IsActive' property not found for 'object' because data item is null. This could happen because the data provider has not produced any data yet. BindingExpression:Path=SelectedPane.IsActive; DataItem='AutoHideArea' (Name='LeftAutoHide'); target element is 'PaneHeader' (Name='HeaderElement'); target property is 'IsHighlighted' (type 'Boolean')

What is causing this problem? Do I need to set the bindings to a fallbackvalue? Do I need to create RadPanes within the RadPaneGroups? If so, can you send me an example?

Docking

answered on 30 Jul 2012

1 answer

130 views

you mean?

Hello,

Is there any possible way to get the list of options to a word through code-behind?

Something like the famous "you mean?" Google?

thanks

SpellChecker

answered on 30 Jul 2012

3 answers

180 views

Loading Pane Content results in InvalidOperationException

Hello

Please refer to the telerik "Save/Load the Content of the Panes" docking topic. I'm trying to load the layout of my docking control in this way when navigating away and then returning to this screen to maintain view state. This page refers to the following piece of code:

private void radDocking_ElementLoading( object sender, Telerik.Windows.Controls.LayoutSerializationLoadingEventArgs e )

{

var pane = e.AffectedElement as RadPane;

if ( pane != null )

{

pane.Content = this.GetPaneContent( e.AffectedElementSerializationTag );

}

I assume that "GetPaneContent" refers to some internal method in the code-behind which returns the content, whatever that control may have been before the content was saved. Since I am using MVVM and adding RadPanes and RadPaneGroups dynamically in my view model, I maintain a dictionary of the pane contents by the serialization tag that I assign to each one. This view model code is as follows:

RadPaneGroup radPaneGroup = new RadPaneGroup { VerticalAlignment = VerticalAlignment.Top, VerticalContentAlignment = VerticalAlignment.Top };

this.view.splitContainer.Items.Add(radPaneGroup);

RadPane radPane = new RadPane

{

Content = createdChartView,

CanUserClose = true,

Title = createdChartView.DisplayName,

};

RadDocking.SetSerializationTag(radPane, chartConfiguration.Id.ToString());

RadDocking.SetSerializationTag(radPaneGroup, chartConfiguration.Id.ToString());

radPaneGroup.Items.Add(radPane);

this.hostedCharts.Add(chartConfiguration.Id, createdChartView);

To explain, chartConfiguration.Id is a Guid which serves as a string tag and hostedCharts is a field of type Dictionary<Guid, ChartView>.
I use this dictionary to get the ChartView when I reload the layout. ChartView is the content I want to reset as the content of the pane.

My element loading event handler looks like this:

private void RadDockingOnElementLoaded(object sender, LayoutSerializationEventArgs e)

{

RadPane newPane = e.AffectedElement as RadPane;

if (newPane != null)

{

ChartView chartView = ((ChartHostViewModel)this.DataContext).GetPaneContent(e.AffectedElementSerializationTag);

// This entire section is to try to remove the chart from its parent all the way up the visual tree.

RadPane oldParentPane = (RadPane)chartView.Parent;

if (oldParentPane != null)

{

RadPaneGroup oldParentGroup = (RadPaneGroup)oldParentPane.Parent;

if (oldParentGroup != null)

{

RadSplitContainer oldSplitContainer = (RadSplitContainer)oldParentGroup.Parent;

if (oldSplitContainer != null)

{

oldSplitContainer.Items.Remove(oldParentGroup);

}

oldParentGroup.Items.Remove(oldParentPane);

}

oldParentPane.Content = null;

}

newPane.Content = chartView;

return;

}

// This section is here because the pane groups fill up the entire space if I leave it out (They seem to be aligned to Stretch)

RadPaneGroup newPaneGroup = e.AffectedElement as RadPaneGroup;

if (newPaneGroup != null)

{

newPaneGroup.VerticalAlignment = VerticalAlignment.Top;

newPaneGroup.VerticalContentAlignment = VerticalAlignment.Top;

}

Here's my concern:
Firstly, if I remove the code to try to remove the ChartView from its parent, I get an InvalidOperationException saying to first disconnect the element before adding it to a new one on the line, "newPane.Content = chartView;" . It seems that the entire visual tree is still intact and reloading the screen creates new visual elements and adds these to the Docking component. Is this not memory intensive? Please note that this screen's (my screen, "ChartHostView")'s lifestyle is Transient and may be affecting the way it should work.

Secondly, my pane groups are not being loaded in the state that I saved them in. Why is it necessary for me re-set their Vertical Alignment ?

Please let me know if I am going about this the completely wrong way.
Thank you.

Docking

answered on 30 Jul 2012

1 answer

75 views

Foreground color for tick in GridViewCheckBoxColumn

Hi

Can someone help me with the following please

How do I set the foreground color in GridViewCheckBoxColumn in XAML ?

I can't seem to find the appropriate property to set

thanks

Murray

GridView

answered on 30 Jul 2012

5 answers

997 views

Virtualizing GridView with Auto height

I have a GridView that displays huge amounts of data. Moreover, columns are generated dynamically depending on the data and columns use custom DataTemplates. That said, GridView really takes some time to draw itself and virtualization feature is crucial for decent performace. However this feature is set to OFF once GridView height is not fixed. Obviously I want my GridView to occupy all available space and change its size when app window is resized. I.e. I want the effect equal to GridView.Height = Auto.

How can I achieve this - that GridView adjusts its size to available free space and still uses virtualization?

GridView

answered on 30 Jul 2012

0 answers

76 views

Google Image like controls

Hi there

I want to arrange large number of some controls containing labels and buttons to be viewed on a window with the ability of resizing.

Is there any feature to implement what Google did in his image search?
In normal state, the control only shows some picture or labels,
but in mouse-over state it must be zoomed-up and all the contained controls like buttons, gauges, and more...

Thanks

General Discussions

asked on 30 Jul 2012

1 answer

590 views

Programmatically create header template

Hi,

I'm trying to programmatically assign a header template for a column. The header template is similar to the GridViewSelectColumn as it just would have a checkbox in it, but I need the column to be able to bind to a property. I did look at the blog post from Vlad, but it will not work for this particular situation.

Below is the code I have to create a custom template (which works with for an ordinary ListView), but I don't know how to programmatically assign it to the column. I tried setting it to the column.Header property since it's of type object, but that did not work.

FrameworkElementFactory factory = new FrameworkElementFactory(typeof(CheckBox));

factory.AddHandler(CheckBox.CheckedEvent, new RoutedEventHandler(GridViewAll_HeaderCheckBox_Checked));

factory.AddHandler(CheckBox.UncheckedEvent, new RoutedEventHandler(GridViewAll_HeaderCheckBox_Checked));

factory.SetValue(CheckBox.ToolTipProperty, "(De)Select All");

DataTemplate template = new DataTemplate();

template.DataType = typeof(bool);

template.VisualTree = factory;

GridViewCheckBoxColumn column = new GridViewCheckBoxColumn();

column.DataMemberBinding = new Binding(prefix + property.Name);

column.Header = template

// <-- this does not work

Thank you,
Tim

GridView

answered on 30 Jul 2012

2 answers

345 views

cannot convert from 'Telerik.Windows.Data.QueryableCollectionView' to 'System.Linq.IQueryable'

I have a GridView that is bound to a QueryableCollectionView. The QueryableCollectionView is constructed from an ObservableCollection, which is populated in code. (So there's no messing about with LINQ to SQL ORMS, etc.)

I have a command implemented in the ViewModel (bound to a button and to a function key, but that's not important), that needs to check to see if any of the records contained in the grid have certain values in a certain field.

I'd thought I'd be able to do a simple LINQ query on the QueryableCollectionView, but it doesn't seem to work. Even the simplest won't compile.

This:

var customerids =

from c in customersQueryView

select c.customerid;

Results in: Instance argument: cannot convert from 'Telerik.Windows.Data.QueryableCollectionView' to 'System.Linq.IQueryable'

This:

var customerids =

from c in customersQueryView.AsQueryable()

select c.customerid;

Results in: Cannot convert lambda expression to type 'Telerik.Windows.Data.SelectDescriptorCollection' because it is not a delegate type.

The only workaround I've been able to find is to iterate through all the records with a foreach(), which results in considerably less clear code.

GridView

answered on 27 Jul 2012

3 answers

210 views

How do you get the cell or row that a GridViewToggleButton is in?

I've created a CustomGridViewToggleRowDetailsColumn class that descends from GridViewBoundColumnBase. Its purpose is to display the row details toggle control only if the row in question contains data to be displayed in the row details.

In order to speed up the retrieval of data from my database, I have added a boolean flag to the view model object that is displayed in the RadGridView that indicates whether the object has data for the row details. This flag is set when the row is retrieved from the database. However, I do not want to retrieve the data for the row details at the same time. Rather, I want to wait for the user to click on the button to expand the details and go get the data at that time. The underlying View Model objects implement INotifyPropertyChanged, so the WPF controls get notification of changes.

The CustomGridViewToggleRowDetailsColumn class has a Click event that I want to program. When the user clicks on the button, I want the code to check to see if the detail data has been retrieved from the database yet, and if not, to go and get it.

Here's the definition of the CustomGridViewToggleRowDetailsColumn class:

class CustomGridViewToggleRowDetailsColumn : GridViewBoundColumnBase {

public static RoutedEvent ClickEvent =

EventManager.RegisterRoutedEvent( "Click", RoutingStrategy.Bubble, typeof( ToggleRowDetailsColumnRoutedEventHandler ), typeof( CustomGridViewToggleRowDetailsColumn ) );

public GridViewCell Cell { get; set; }

public event RoutedEventHandler Click {

add { AddHandler( ClickEvent, value ); }

remove { RemoveHandler( ClickEvent, value ); }

}

public override object Header {

get { return null; }

set { base.Header = value; }

}

public GridViewToggleButton ToggleButton { get; set; }

private Binding toggleButtonVisibility;

public Binding ToggleButtonVisibility {

get { return toggleButtonVisibility; }

set { toggleButtonVisibility = value; }

}

public CustomGridViewToggleRowDetailsColumn() {

this.EditTriggers = GridViewEditTriggers.None;

}

public override bool CanFilter() {

return false;

}

public override bool CanGroup() {

return false;

}

public override bool CanSort() {

return false;

}

public override FrameworkElement CreateCellElement( GridViewCell cell, object dataItem ) {

Cell = cell;

ToggleButton = new GridViewToggleButton {

Margin = new System.Windows.Thickness( 3 )

};

ToggleButton.Click += new RoutedEventHandler( ToggleButton_Click );

if ( this.DataMemberBinding != null ) {

ToggleButton.SetBinding( GridViewToggleButton.IsCheckedProperty, this.DataMemberBinding );

}

if ( ToggleButtonVisibility != null ) {

ToggleButton.SetBinding( GridViewToggleButton.VisibilityProperty, ToggleButtonVisibility );

}

GridViewRow row = cell.ParentRow as GridViewRow;

row.SetBinding( GridViewRow.DetailsVisibilityProperty, new Binding( "IsChecked" ) {

Source = ToggleButton,

Converter = new BooleanToVisibilityConverter(),

Mode = BindingMode.TwoWay

} );

return ToggleButton;

}

void ToggleButton_Click( object sender, RoutedEventArgs e ) {

// Raise our Click event

RoutedEventArgs newEventArgs = new ToggleRowDetailsColumnRoutedEventArgs( ClickEvent, Cell );

RaiseEvent( newEventArgs );

}

public class ToggleRowDetailsColumnRoutedEventArgs : RoutedEventArgs {

public GridViewCell Cell { get; set; }

public GridViewRow Row {

get { return Cell.ParentRow as GridViewRow; }

}

public ToggleRowDetailsColumnRoutedEventArgs( RoutedEvent routedEvent, GridViewCell cell )

: base( routedEvent ) {

Cell = cell;

}

public delegate void ToggleRowDetailsColumnRoutedEventHandler( object sender, ToggleRowDetailsColumnRoutedEventArgs e );

Here is the Click event handler that I wrote that is called when the user clicks on the toggle button for a row that has details to be displayed:

private void ExpandAlarms_Click( object sender, ToggleRowDetailsColumnRoutedEventArgs e ) {

ReadViewModel read = e.Row.Item as ReadViewModel;

if ( read.Alarms == null ) {

read.Alarms = DataInterface.GetAlarmsForRead( read.ID );

}

e.Handled = true;

}

The problem is that the parameters to the ExpandAlarms_Click method always refer to the same row, no matter which row I click on. I think there is something wrong, either in the ToggleButton_Click method or in the CreateCellElement method. But I don't know what the issue could be. I think I need to save the Cell passed to the CreateCellElement somewhere other than were I'm saving it now, but I'm not sure where that would be.

Please help

Tony

GridView

answered on 27 Jul 2012