Questions on UI for WPF Forum

2 answers

650 views

Column IsVisible does not bind with late DataContext binding

I've run into a problem where if the DataContext is set too late in the initialization/rendering process, bindings on the IsVisible property of columns are never established. Below is an example showing the problem.

If you establish the DataContext in the constructor, it works as expected; the Number column is not shown, and you can toggle its display using the checkbox.

However, if you comment out that line, run the app, and use the button to establish the DataContext after the grid has rendered, the Number column is shown even though ShowNumber is false, and the binding does not respond to changes in ShowNumber (again using the checkbox).

I found a work-around by re-establishing the binding after setting the DataContext, but this is ugly and much less maintainable.

Is there a way I can force it to update the column bindings when the DataContext is set, rather than re-creating the binding for every column on which I need to control visibility?

Thanks,
Louis

XAML:

<Window x:Class="DelayedBinding.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"

Title="MainWindow" Height="350" Width="525">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="*"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<telerik:RadGridView Grid.Row="0" x:Name="radGridView" AutoGenerateColumns="False" ItemsSource="{Binding Path=Items}"

IsFilteringAllowed="False" ShowGroupPanel="False" CanUserSortColumns="False">

<telerik:RadGridView.Columns>

<telerik:GridViewDataColumn Header="Name" Width="65"

DataMemberBinding="{Binding Path=Name}"/>

<telerik:GridViewDataColumn IsVisible="{Binding Path=ShowNumber}" Header="Number" Width="65" x:Name="NumberColumn"

DataMemberBinding="{Binding Path=Number}"/>

<telerik:GridViewDataColumn Header="Group" Width="65"

DataMemberBinding="{Binding Path=Group}"/>

</telerik:RadGridView.Columns>

</telerik:RadGridView>

<StackPanel Grid.Row="1" Orientation="Horizontal">

<Button Click="ConnectVM" Content="ConnectVM" Margin="5"/>

<CheckBox IsChecked="{Binding Path=ShowNumber}" Content="Show Number" VerticalAlignment="Center"/>

</StackPanel>

</Grid>

</Window>

Code-behind:

using System.Collections.ObjectModel;

using System.ComponentModel;

using System.Windows;

namespace DelayedBinding

{

public class Item

{

public string Name { get; set; }

public int Number { get; set; }

public string Group { get; set; }

}

public partial class MainWindow : Window, INotifyPropertyChanged

{

public event PropertyChangedEventHandler PropertyChanged;

public ObservableCollection<Item> Items { get; private set; }

private bool _ShowNumber = false;

public bool ShowNumber

{

get { return _ShowNumber; }

set

{

_ShowNumber = value;

if (PropertyChanged != null)

PropertyChanged(this, new PropertyChangedEventArgs("ShowNumber"));

}

public MainWindow()

{

Items = new ObservableCollection<Item>();

for (int i = 0; i < 5; i++)

Items.Add(new Item() { Name = "Object " + i, Number = i, Group = (i % 2 == 1 ? "Odd" : "Even") });

InitializeComponent();

// If we connect the DataContext here, everything works fine!

DataContext = this;

}

private void ConnectVM(object sender, RoutedEventArgs e)

{

// If we wait to connect it here, the ShowNumber binding isn't established!

DataContext = this;

// This is the work-around, by re-establishing the binding, the grid again works correctly.

//NumberColumn.SetBinding(Telerik.Windows.Controls.GridViewColumn.IsVisibleProperty, "ShowNumber");

}

GridView

answered on 20 May 2014

1 answer

243 views

Chrome Button Style To Menu

I have an application where I am using buttons across the top that are styled a certain way. I can seem to figure out how to get that same style to apply to the top level menu. So I need to know how to apply a chrome button style to a top level menu? Submenu popup should remain with the default style. Just wanted to change
the style of the main menu so that when we hover over it looks like chrome button.

Here is the styling we are doing on the Button. Right now, I can't seem to achieve the mouseover effect this has for Top Level menu

<Style TargetType="{x:Type telerik:RadButton}">

<Setter Property="Padding" Value="4" />
<Setter Property="Margin" Value="1,1,0,1" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:RadButton}">
<Grid>
<Chromes:ButtonChrome
CornerRadius="1"
RenderNormal="False"
RenderMouseOver="{TemplateBinding IsMouseOver}"
RenderPressed="{TemplateBinding IsPressed}" Template="{DynamicResource ButtonChromeControlTemplate1}">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme />
</telerik:StyleManager.Theme>
</Chromes:ButtonChrome>
<ContentPresenter
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
Margin="{TemplateBinding Padding}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</telerik:RadButton.Style>

Menu

answered on 20 May 2014

1 answer

154 views

Customize Shape Progress

Hi.

I looked for 'RadProgress Demo - First Look'

In the demo, when 'IsIndeterminate' button is checked appeared.

I want this shape progressbar.

How make this?

ProgressBar

answered on 19 May 2014

2 answers

128 views

Restricting row height in horizontal grouping

Hi all

I have a RadScheduleView grouped by resources in a horizontal view. My problem now is that if the view does not contain many rows, every row is stretched so that the rows take all space (see screenshot). This doesn't seem to be because of any of my templates (which don't resize).

In order to simplify diagnosis, please check the second screenshot. I overwrote the height of all elements in the style, including the groupheader (green background). Basically, that GroupHeader doesn't have a parent anymore, it's just part of it's parent (AppointmentsPanel). I assume that parent stretches content, which I something I'd rather not have as it screws the layout.

What I basically want is a automatic height, rather than the control stretching all rows to take up all vertical space. Any idea how I can set this?

Thanks
Philipp

ScheduleView

answered on 19 May 2014

1 answer

145 views

Navigating within RadScheduleView

Hi all

I have two different RadScheduleViews, both grouped by a shared collection of resources. A resource represents an employee.

Now, from my group header (for which the data context is the employee resource), I would like to navigate to the same employee on the other RadScheduleView. As far as I can tell, I need an appointment to do so with the RadScheduleView.ScrollIntoView, which I can determine from my resource. However, that means I can't navigate if there are now appointments for the employee yet. How can I accomplish this?

Thanks,
Philipp

ScheduleView

answered on 19 May 2014

1 answer

296 views

Axis Title Style.

Hi.

My ' MultiVerticalAxis' is setted <Setter Property="Stroke" Value="{Binding Converter={StaticResource seriesColorConverter}}"/>.

In converter,

axis.Title = obj.Unit;
axis.Maximum += 0.5;
axis.Minimum += -0.5;
axis.LineStroke = new SolidColorBrush(Colors.White);
axis.Foreground = new SolidColorBrush(Colors.White);
axis.FontSize = 11;

In this picture, I want to rotate 'Title Font'

What should I do??

Chart

answered on 19 May 2014

1 answer

168 views

Timeline view scrolling with out zooming?

Hello,

I want to set the timeline viewing slot to either 1 or 5 days and instead of having all 5 days compressed into the same area, I would like to have just be able to scroll to the different days with the timeslots as the same width.

What settings do I need to set to enable this?

Thanks!
Ryan

ScheduleView

answered on 19 May 2014

2 answers

154 views

How to plot error bar for standard deviation?

Hi Telerik,

Is it possible for me in WPF to plot an error bar representing the standard deviation?

I want it to look similar to the error bars found here http://demos.telerik.com/kendo-ui/dataviz/line-charts/error-bars.html

Best regards,
Jeppe

General Discussions

answered on 19 May 2014

3 answers

133 views

Collapsing DateTimeCategoricalAxis still reserves space

I have a problem where collapsing a DateTimeCategoricalAxis is still reserving space in the UI. It is being used as the Horizontal axis, and is reserving Width but not Height. The below example shows the problem.

Note that the display looks correct initially, with both graphs going to the edge of the windows. Now use the checkbox to enable the horizontal display on the bottom chart, which switches the Visibility on the Axis from Collapsed to Visible. The chart displays correctly. Now uncheck the checkbox, which changes the Visibility back to Collapsed. Now notice the chart has about an inch of white-space on either side of the graph. The Height collapsed correctly, but the Width did not.

Is there any way of getting the Axis to resize correctly after being Collapsed short of replacing the Axis completely (see the commented code)?

This was tested with 2014.1.331.45.

Thanks,
Louis

MainWindow.xaml:

<Window x:Class="CollapsedAxis.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"

Title="MainWindow" Height="400" Width="600">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="*"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<telerik:RadCartesianChart x:Name="PropertyChart1" Grid.Row="0">

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:DateTimeCategoricalAxis Visibility="Collapsed"/>

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.VerticalAxis>

<telerik:LinearAxis Visibility="Collapsed"/>

</telerik:RadCartesianChart.VerticalAxis>

<telerik:RadCartesianChart.Series>

<telerik:LineSeries

CategoryBinding="Date"

ValueBinding="Value"

ItemsSource="{Binding Path=Series1}">

</telerik:LineSeries>

</telerik:RadCartesianChart.Series>

</telerik:RadCartesianChart>

<telerik:RadCartesianChart x:Name="PropertyChart2" Grid.Row="1">

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:DateTimeCategoricalAxis Visibility="{Binding Path=AxisVisible}"/>

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.VerticalAxis>

<telerik:LinearAxis Visibility="{Binding Path=AxisVisible}"/>

</telerik:RadCartesianChart.VerticalAxis>

<telerik:RadCartesianChart.Series>

<telerik:LineSeries

CategoryBinding="Date"

ValueBinding="Value"

ItemsSource="{Binding Path=Series1}">

</telerik:LineSeries>

</telerik:RadCartesianChart.Series>

</telerik:RadCartesianChart>

<CheckBox Grid.Row="2" IsChecked="{Binding Path=DisplayAxis}" Content="Display Axis" HorizontalAlignment="Left"/>

</Grid>

</Window

MainWindow.xaml.cs:

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Windows;

using System.Windows.Data;

using Telerik.Windows.Controls.ChartView;

namespace CollapsedAxis

{

public class MyPoint

{

public DateTime Date { get; set; }

public Double Value { get; set; }

}

public partial class MainWindow : Window, INotifyPropertyChanged

{

public List<MyPoint> Series1 { get; private set; }

private bool _DisplayAxis;

public bool DisplayAxis

{

get { return _DisplayAxis; }

set

{

_DisplayAxis = value;

AxisVisible = (_DisplayAxis ? Visibility.Visible : Visibility.Collapsed);

RaisePropertyChanged("DisplayAxis");

}

private Visibility _AxisVisible;

public Visibility AxisVisible

{

get { return _AxisVisible; }

set

{

_AxisVisible = value;

// Enabling this to replace the axis instead of just using the binding to

// collapse it results in the correct behavior.

//PropertyChart2.HorizontalAxis = new DateTimeCategoricalAxis() { Visibility = _AxisVisible };

RaisePropertyChanged("AxisVisible");

}

public MainWindow()

{

Series1 = new List<MyPoint>();

_DisplayAxis = false;

_AxisVisible = Visibility.Collapsed;

for (int i = 0; i < 5; i++)

{

DateTime date = DateTime.Today.AddDays(i);

Series1.Add(new MyPoint() { Date = date, Value = i * 1000 });

}

InitializeComponent();

DataContext = this;

}

#region INotifyPropertyChanged

public event PropertyChangedEventHandler PropertyChanged;

protected void RaisePropertyChanged(string propertyName)

{

if (PropertyChanged != null)

PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

}

#endregion

}

ChartView

answered on 19 May 2014

2 answers

820 views

Icon for RadWindow

I have replaced several of my dialog forms with RadWindow form in my WPF application and the Application Icon that used to show on the dialogs don't seem to show on the RadWindow. I have tried a lot of different ways of getting the Icon to show including the following:

if (((System.Windows.Controls.Canvas)this.Parent).Parent is Window)

{

Window thisWindow = ((System.Windows.Controls.Canvas)this.Parent).Parent as Window;

thisWindow.ShowInTaskbar = true;

thisWindow.Title = this.Header.ToString();

this.Icon = thisWindow.Icon;

}

The Icon shows in the taskbar correctly, but nothing is shown on the RadWindow itself. Is there something I am doing wrong? Some setting someplace that I am missing that will make it magically show it?

I tried:

Uri iconUri = new Uri("pack://application:,,,/WPFIcon2.ico", UriKind.RelativeOrAbsolute);

this.Icon = BitmapFrame.Create(iconUri);

and I get the text "pack://application:,,,/WPFIcon2.ico" where the Icon should be.

I even tried creating a System.Drawing.Icon object and setting it to that and it just puts "(Icon)" in the corner of the form.

I have nothing in the XAML that refers to the Icon property for the window. I assumed that the RadWindow type would automatically get the icon from the application, but I have not found any setting on the control that turns on or off the displaying of the icon.

Window

answered on 18 May 2014