I am using a linear gauge set to horizontal orientation inside a User Control class. Because of the number of different ways that a user needs to be able to configure this control class I am building the whole gauge in the code behind and none in the xaml. When I go to re-size the gauge by dragging it horizontally then the scale will re-size appropriately in the height and width dimensions, but when I attempt to re-size the control vertically the scales height and width will not decrease with the re-size of the control. This will happen until the scale is covered up by the bottom edge of the gauge. How can I get the scale to correctly size within the UserControl?
I have attached screenshots to see how the control looks when it is re-sized vertically and horizontally.
Thanks for any help.
The first code sample creates the gauge in the codebehind and the second code sample keeps the top of the scale in the correct spot when re-sizing.
I have attached screenshots to see how the control looks when it is re-sized vertically and horizontally.
Thanks for any help.
The first code sample creates the gauge in the codebehind and the second code sample keeps the top of the scale in the correct spot when re-sizing.
private void SetupHorizontalSlider()
{
//clear the grid of any controls before setting up a control
layoutRoot.Children.RemoveAt(0);
//create the RadGauge
mGaugeControl = new RadGauge() { Name = "mGaugeControl" };
//create the LinearGauge
LinearGauge linearGauge = new LinearGauge();
//add the LinearGauge to the RadRauge container
mGaugeControl.Content = linearGauge;
//create the LinearScale
LinearScale linearScale = new LinearScale()
{
Name = "linearScale",
Min = 0,
Max = 10,
StartWidth = 0.1,
EndWidth = 0.1,
StrokeThickness = 1,
MajorTicks = 10,
MiddleTicks = 1,
MinorTicks = 5,
Orientation = Orientation.Horizontal,
Left = 0.15,
Top = 0.13,
RelativeHeight = 0.70
};
linearScale.MajorTick.Length = 0.01;
linearScale.MajorTick.TickWidth = 0.1;
linearScale.MajorTick.Location = ScaleObjectLocation.OverCenter;
linearScale.MiddleTick.Length = 0.025;
linearScale.MiddleTick.TickWidth = 0.5;
linearScale.MiddleTick.Location = ScaleObjectLocation.OverCenter;
linearScale.MinorTick.Length = 0.02;
linearScale.MinorTick.TickWidth = 0.3;
linearScale.MinorTick.Location = ScaleObjectLocation.OverCenter;
linearScale.SizeChanged += new System.Windows.SizeChangedEventHandler(linearScale_SizeChanged);
linearScale.Label.Location = ScaleObjectLocation.Inside;
//add the RadialScale to the RadialGauge Items collection
linearGauge.Items.Add(linearScale);
//use the marker styled in the resource section of this page
mMarkerTemplate = this.Resources["HorizontalTopMarkerTemplate"] as ControlTemplate;
//create the LinearBar indicator and add it to the indicators collection
mLinearBar = new LinearBar()
{
Name = "bar",
Location = ScaleObjectLocation.OverCenter,
EmptyFill = System.Windows.Media.Brushes.Transparent,
Background = System.Windows.Media.Brushes.Green,
IsAnimated = true,
Duration = new Duration(TimeSpan.FromSeconds(2)),
Value = 2
};
linearScale.Indicators.Add(mLinearBar);
//create marker indicator to add to the indicators collection
mNeedle = new Marker()
{
Name = "needle",
Template = mMarkerTemplate,
IsAnimated = true,
Duration = new Duration(TimeSpan.FromSeconds(2)),
Location = ScaleObjectLocation.OverCenter,
RelativeHeight = 0.1,
RelativeWidth = 0.09,
Value = 2
};
linearScale.Indicators.Add(mNeedle);
//register the needle with the page so that the animation will work correctly
RegisterControl(mNeedle.Name, mNeedle);
RegisterControl(mLinearBar.Name, mLinearBar);
//create NumericIndicator to add to the RadialScale Indicators collection
//mValueIndicator = new NumericIndicator();
mGaugeScale = linearScale;
mGauge = linearGauge;
layoutRoot.Children.Add(mGaugeControl);
}
void linearScale_SizeChanged(object sender, System.Windows.SizeChangedEventArgs e)
{
((Telerik.Windows.Controls.Gauges.LinearScale)(sender)).Top = (e.NewSize.Height / e.NewSize.Width) / 2;
}