Resizable controls - what's the problem?
To save HMI screen space, application developers may want to make some controls resizable. Applying ScaleTransform is not a problem and is a good solution in many cases. See Pipes and Tanks Demo for example - it uses ScaleTransform and redraws screen content when a user changes browser window size.
Unfortunately, ScaleTransform is not an optimal solution when dealing with complex UI elements, especially those containing some amount of text - some pieces may look ugly, some may become too small to be useful. The only solution is to make complex controls able to react to the 'SizeChanged' event and recalculate internal layout at runtime. Latest version of Alarm Summary and Trend Control can do that, and this post shows how application developers can use this functionality.
We will need a container control that lets user change its size, and a piece of code that passes the changes to CSWorks controls. You can develop your own container control (there are a lot of examples available in the web) or use an existing third-party container control for that. I will use RadWindow from Telerik in this example - it serves the purpose quite well.
Resizable Alarm Demo
1. Download Rad Controls for Silverlight trial package from www.telerik.com (DLLs only).
2. Unzip downloaded archive to "C:\Program Files\CSWorks\Demo\Src\tps\Telerik". Telerik DLLs will be unpacked to "C:\Program Files\CSWorks\Demo\Src\tps\Telerik\Binaries\Silverlight\".
3. Open Alarm Demo project ("C:\Program Files\CSWorks\Demo\Src\AlarmDemo\") in Visual Studio.
4. We will use RadWindow control implemented in Telerik.Windows.Controls.Navigation.dll. Add Telerik.Windows.Controls.Navigation.dll and Telerik.Windows.Controls.dll to the reference list for Alarm Demo project.
5. Open Page.xaml file. Add 'telerik' namespace to the UserControl element:
<UserControl ...
xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
... >
6. Replace control content with a grid that contains RawWindow that contains CSWorks Alarm Summary, and add SizeChanged event handler for RadWindow:
<Grid>
<telerik:RadWindow x:Name="radWindow" SizeChanged="OnSizeChanged">
<telerik:RadWindow.Header>
<TextBlock Text="Alarm Demo"/>
</telerik:RadWindow.Header>
<alarm:AlarmSummary ... />
</telerik:RadWindow>
</Grid>
7. Open Page.xaml.cs file, implement SizeChanged event handler that adjusts AlarmSummary height and width when RadWindow size is changed:
private void OnSizeChanged(object sender, SizeChangedEventArgs e)
{
GeneralTransform gtGlobal = alarmSummary.TransformToVisual(radWindow);
Point leftTopGlobal = gtGlobal.Transform(new Point(0, 0));
alarmSummary.Height = radWindow.Height - radWindow.BorderThickness.Bottom - leftTopGlobal.Y - 4.0;
alarmSummary.Width = radWindow.Width - leftTopGlobal.X * 2;
}
8. Update Loaded event handler so RadWindow shows itself after page is loaded:
private void Page_Loaded(object sender, RoutedEventArgs e)
{
...
radWindow.Show();
}
9. Rebuild the project and run Alarm Demo from Start Menu. Resize RadWindow and watch Alarm Summary changing its layout:
Resizable Trend
You can do the same to CSWorks Trend control.
1. Open Trend Demo project ("C:\Program Files\CSWorks\Demo\Src\TrendDemo\TrendDemo.Sample.csproj")
2. Add Telerik.Windows.Controls.Navigation.dll and Telerik.Windows.Controls.dll to the reference list.
3. Open MainPage.xaml file. Add 'telerik' namespace as shown above.
4. Change xaml so RadWindow contains TrendControl:
<Grid>
<telerik:RadWindow x:Name="radWindow" SizeChanged="OnSizeChanged">
<telerik:RadWindow.Header>
<TextBlock Text="Trend Demo"/>
</telerik:RadWindow.Header>
<t:Trend ...>
...
</t:Trend>
</telerik:RadWindow>
</Grid>
5. Open MainPage.xanl.cs. Add OnSizeChanged handler:
private void OnSizeChanged(object sender, SizeChangedEventArgs e)
{
GeneralTransform gtGlobal = _demoTrend.TransformToVisual(radWindow);
Point leftTopGlobal = gtGlobal.Transform(new Point(0, 0));
_demoTrend.Height = radWindow.Height - radWindow.BorderThickness.Bottom - leftTopGlobal.Y - 4.0;
_demoTrend.Width = radWindow.Width - leftTopGlobal.X * 2;
}
6. Show RadWindow on startup:
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
...
radWindow.Show();
}
7. Rebuild the project and run Trend Demo from Start Menu. Resize RadWindow and watch Trend control changing its layout:
