Hi,
I want to hide the HorizontalScrollLeft and HorizontalScrollRight elements (I do this by setting Visibility to Collapsed in their respective style, it works).
But I also want to use the full space for HorizontalPreviewContent.
I did some research and I assume that I need to provide a new ControlTemplate for my XamZoombar instance. I think that I need to remove the horizontal margins in the grid named HorizontalPreviewElement. (It is the underlined part in the XAML code below!!)
Is this correct?
And if yes, what would be the most convenient way to do this? At the moment I am afraid that I need to reproduce all those StaticResource elements in my own XAML code and I would like to avoid that (if that is possible).
I would be extremely grateful if you could give me a sample application with HorizontalScrollLeft and HorizontalScrollRight elements collapsed _and_ the HorizontalPreviewContent element filling the complete space inside the XamZoombar.
Thanks,
Tjark
<Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="local:XamZoombar"> <Grid> <Canvas x:Name="HorizontalRootCanvasElement" Background="{TemplateBinding Background}"> <Grid x:Name="HorizontalScrollbarElement"> <Border BorderBrush="{StaticResource StrokeBrush}" BorderThickness="1" Background="{StaticResource BaseBrush}" CornerRadius="2"> <Border BorderBrush="{StaticResource BaseInnerBorderBrush}" BorderThickness="1,1,1,0" CornerRadius="3,3,0,0"/> </Border> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Border x:Name="HorizontalTrackElement" BorderThickness="1,0,1,1" Background="Transparent" Grid.Column="1" CornerRadius="2" Margin="0,2,0,1"> <Border BorderThickness="1" CornerRadius="2" Margin="0,1,0,0"> <Border BorderThickness="1" CornerRadius="0,0,1,1"/> </Border> </Border> <Grid Cursor="Hand"> <ContentControl x:Name="HorizontalScrollLeftElement" Style="{TemplateBinding HorizontalScrollLeftStyle}"> <Grid MaxWidth="9" MaxHeight="22" MinWidth="3" MinHeight="6" Width="5"> <Path Data="M 7,11 C7,11 18,0 18,0 18,0 18,22 18,22 18,22 7,11 7,11 z" Fill="#FFFFFF" HorizontalAlignment="Center" Margin="1,1,0,0" Opacity="0.6" Stretch="Fill" VerticalAlignment="Center"/> <Path Data="M 8,11 C8,11 19,0 19,0 19,0 19,22 19,22 19,22 8,11 8,11 z" Fill="#FF5a6978" HorizontalAlignment="Center" Opacity="1" Stretch="Fill" VerticalAlignment="Center"/> </Grid> </ContentControl> </Grid> <Grid Cursor="Hand" Grid.Column="2"> <ContentControl x:Name="HorizontalScrollRightElement" Style="{TemplateBinding HorizontalScrollRightStyle}"> <Grid MaxWidth="9" MaxHeight="22" MinWidth="3" MinHeight="6" Width="5"> <Path Data="M 12,11 C12,11 1,0 1,0 1,0 1,22 1,22 1,22 12,11 12,11 z" Fill="#FFFFFF" HorizontalAlignment="Center" Margin="1,1,0,0" Opacity="0.6" Stretch="Fill" VerticalAlignment="Center"/> <Path Data="M 11,11 C11,11 0,0 0,0 0,0 0,22 0,22 0,22 11,11 11,11 z" Fill="#FF5a6978" HorizontalAlignment="Center" Opacity="1" Stretch="Fill" VerticalAlignment="Center"/> </Grid> </ContentControl> </Grid> </Grid> <Grid x:Name="HorizontalPreviewElement" Margin="24,6,24,6"> <ContentPresenter Content="{TemplateBinding HorizontalPreviewContent}"/> </Grid> </Grid> <ContentControl x:Name="HorizontalThumbElement" Cursor="Hand" HorizontalContentAlignment="Stretch" Style="{TemplateBinding HorizontalThumbStyle}" UseLayoutRounding="False" VerticalContentAlignment="Stretch"> <Grid> <Border BorderThickness="0,1,0,1" Margin="0,2" UseLayoutRounding="False"> <Border.BorderBrush> <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> <LinearGradientBrush.GradientStops> <GradientStopCollection> <GradientStop Color="#FFB0B5B9" Offset="0"/> <GradientStop Color="#FF7F868D" Offset="1"/> </GradientStopCollection> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Border.BorderBrush> <Border BorderBrush="{StaticResource ScaleElementBrush}" BorderThickness="0,2" Opacity="1"> <Border BorderBrush="#FF9AA0A5" BorderThickness="1" Background="{StaticResource ThumbBackgroundBrush}" Margin="4,0"/> </Border> </Border> </Grid> </ContentControl> <ContentControl x:Name="HorizontalScaleLeftElement" Cursor="SizeWE" HorizontalContentAlignment="Stretch" Style="{StaticResource HorizontalScaleLeftStyle}" VerticalContentAlignment="Stretch" Width="8" Margin="0" Canvas.Left="142"/> <ContentControl x:Name="HorizontalScaleRightElement" Cursor="SizeWE" HorizontalContentAlignment="Stretch" Style="{StaticResource HorizontalScaleRightStyle}" VerticalContentAlignment="Stretch" Width="8"/> </Canvas>
I have attached a sample to demonstrate what I want to achieve.
I would like to have the blue-colored ItemsControl fill the complete area inside the XamZoombar.
Sorry, I have to correct myself:
not the complete area, but rather: the complete area minus the space occupied by the HorizontalScaleLeft and HorizontalScaleRight elements.
So in other words I want to reduce the space reserved for HorizontalScrollLeft and HorizontalScrollRight to zero, since they are collapsed in my case.
I just figured that the scroll buttons might be useful in my case after all, so please forget about my questions above.
However, instead I have this question:
How can I prevent the triangles on the scroll buttons from being vertically stretched, if I set the Height of the Zoombar to e.g. 60?
Hello Tjark,
Thank you for your post(s)!
I have been investigating your sample application, and I am seeing the behavior you are describing. To disallow the triangles on the scroll buttons from being vertically stretched in XAML, you would need to modify the default template of the XamZoombar, but this template is rather extensive, so I would recommend doing this in code. If you handle the Loaded event on the XamZoombar, you can use the Infragistics.Windows.Utilities class to obtain the elements you need by name. You can use the static GetDescendantFromName method to do this, and by doing so, you can get a pair of ContentControl objects named "HorizontalScrollLeftElement" and "HorizontalScrollRightElement" from the XamZoombar. The content of these ContentControl objects is a Grid, and if you set the MinHeight and MaxHeight on these Grids to the same value, you can prevent the triangles from resizing.
I have attached a modified version of the sample project you sent to demonstrate the above. Also, in the case that your original inquiry comes up again, I found a similar solution to it as well. It involves using the Utilities class mentioned above to obtain a Grid named "HorizontalPreviewElement." If you reduce the margin on this Grid, you can have the preview area take up the entire space of the XamZoombar.
Please let me know if you have any other questions or concerns on this matter.
Sincerely,AndrewAssociate DeveloperInfragistics Inc.www.infragistics.com/support
Hi Andrew,
thanks a lot, it works.