Rank 1
Hi!
I need your help. I have a details panel with toolbar that shows detail information from a RadgridView, next is snippet code:
<StackPanel x:Name="pnlToolbar" Height="55" Margin="0,0,3,0" Width="416">
<telerik:RadToolBar x:Name="tlbDetalle" Orientation="Horizontal" OverflowButtonVisibility="Hidden" Height="54" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" BorderBrush="#FFE9F2FF" BorderThickness="1" HorizontalAlignment="Right" Width="413">
<Button Tag="btnAnterior" Click="btnToolBar_Click">
<Image Source="/App_LocalResources/Imagenes/FechaArriba.png" Stretch="UniformToFill" Height="41" Width="41" />
</Button>
<Button Tag="btnSiguiente" Click="btnToolBar_Click">
<Image Source="/App_LocalResources/Imagenes/FechaAbajo.png" Stretch="UniformToFill" Height="41" Width="41" />
</Button>
<Button x:Name="btnInsertar" Tag="btnInsertar" Click="btnToolBar_Click">
<Image Source="/App_LocalResources/Imagenes/HojaNueva.png" Stretch="UniformToFill" Height="41" Width="41" />
</Button>
<Button Tag="btnGrabar" Click="btnToolBar_Click">
<Image Source="/App_LocalResources/Imagenes/Almacenar.png" Stretch="UniformToFill" Height="41" Width="41" />
</Button>
<Button Tag="btnEliminar" Click="btnToolBar_Click">
<Image Source="/App_LocalResources/Imagenes/Cesta.png" Stretch="UniformToFill" Height="41" Width="41" />
</Button>
</telerik:RadToolBar>
</StackPanel>
<Grid x:Name="pnlDetails Height="249" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Label x:Name="lblCodigo" Content="Código" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="8,8.5,76,8.499"/>
<telerik:RadMaskedTextBox x:Name="fmtCodigo" IsEnabled="{Binding kernel:App_PageKernel.EsRegistroNuevo}" Style="{DynamicResource Estilo1MaskedTextBox}" Value="{Binding ElementName=grdGridConsulta, Path=SelectedItem.CA001, Mode=TwoWay, UpdateSourceTrigger=Explicit, Converter={StaticResource ValueConverter}}" Validation.ErrorTemplate="{StaticResource PlantillaErrores}" Margin="87,0,0,8.5" HorizontalAlignment="Left" Width="51.92" VerticalAlignment="Bottom" TabIndex="0" Mask="n0" MaskType="Numeric" HorizontalContentAlignment="Right">
<Label x:Name="lblTitulo" Content="Titulo" Margin="21,84,0,0" VerticalAlignment="Top" Width="77" Height="27"/>
<TextBox x:Name="txtTitulo" IsEnabled="{Binding kernel:App_PageKernel.EsRegistroNuevo}" Style="{StaticResource Estilo1TextBox}" Text="{Binding ElementName=grdGridConsulta, Path=SelectedItem.CA002, Mode=TwoWay, UpdateSourceTrigger=Explicit}" Validation.ErrorTemplate="{StaticResource PlantillaErrores}" HorizontalAlignment="Left" Margin="102,84,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="27" TabIndex="1" Width="230"/>
<Label x:Name="lblEjecutable" Content="Ejecutable" Margin="21,121,0,0" VerticalAlignment="Top" Width="77" Height="27"/>
<TextBox x:Name="txtEjecutable" IsEnabled="{Binding kernel:App_PageKernel.EsRegistroNuevo}" Style="{StaticResource Estilo1TextBox}" Text="{Binding ElementName=grdGridConsulta, Path=SelectedItem.CA003, Mode=TwoWay, UpdateSourceTrigger=Explicit}" Validation.ErrorTemplate="{StaticResource PlantillaErrores}" HorizontalAlignment="Left" Margin="102,121,0,0" TextWrapping="Wrap" VerticalAlignment="Top" TabIndex="2" Width="301" Height="27"/>
...
...
</Grid>
I wanted to show errors validation by using a Errors Template and setting Validation.ErrorTemplate="{StaticResource PlantillaErrores}" in every control, next is the code from Page.Resources:
<ControlTemplate x:Key="PlantillaErrores">
<StackPanel x:Name="PlantillaErrores">
<StackPanel Orientation="Horizontal">
<Image Height="20" Margin="0,0,3,0" Source="/App_LocalResources/Imagenes/Advertencia.png">
<Image.Effect>
<DropShadowEffect BlurRadius="14" Direction="276" ShadowDepth="1" Color="#FFC2BA9E"/>
</Image.Effect>
</Image>
<Border BorderBrush="Red" BorderThickness="1">
<AdornedElementPlaceholder/>
</Border>
</StackPanel>
</StackPanel>
</ControlTemplate>
Everything is working OK, when errors happen, image and red rectangle around control is showed in correct way, but something extrange is happening when I need to hide Details Panel, the way I do this is by using an opacity effect from 1 to 0 through storyboard action, not hidden by Visibility property, problems is that the Image and Red Rectangle continues showing and they don't be hidden, any way both of them get hidden is when I move mouse over any toolbar button - curiously -, so, image and red rectangle disappear. Maybe something about rendering, I guess, so I tried by this.InvalidateVisual(); into my page class but nothing changes, image and red rectangle continues showing. Same way happens in the other way, when I need to make visible details panel by changing opacity from 0 to 1 through storyboard action and previously image and rectangle was hidden by the action of move mouse over any toolbar button, and next details panel get visible, image and red rectangle continues hidden, only action of move mouse over any toolbar button makes image and red rectangle appear again.
thanks for your help!
4 Answers, 1 is accepted
Sorry for the late reply!
Unfortunately we are not sure what can cause this wrong behavior and it will be better if you can send us an example project in order to check (and debug) locally what is going on.
Vlad
the Telerik team
Rank 2
I've got a similar issue with radTransitionControl. When I change the content of rtc to show another view which initially has/shows an "IDataError", the error template is not part of the transition and stays above rtc.
This is kind of ugly!
Any idea?
Thanks
WPF has some AdornerLayers and AdornerDecorators that stuff like the validation rectangles and focus visual elements use to render themselves above the controls.
The AdornerDecorator represents a control that offers a layer for the content within and another layer above for use by AdornerLayers. The AdornerLayer show their content in the second layer of AdornerDecorator that is up the visual tree.
For performance purposes these "above-elements" does not pick well layout updates. Once placed in AdornerDecorator they will not update their position on screen. That's why the validation errors sometimes stays on top of collapsed expander, animated content of TransitionControl and so on. The solution is to place AdornerDecorator in the root of your Page or UserControl. It will pick the validation errors but still it will be in the animated part of the visual tree so it will move these rectangles with the page.
The AdornerDecorator is placed like that:
<AdornerDecorator> <Grid> <TextBlock Text="Screen2 with adorner Decorator to handle the adorner layers" /> <telerik:RadNumericUpDown HorizontalAlignment="Center" VerticalAlignment="Center" Value="{Binding Path=Value, Mode=TwoWay, ValidatesOnExceptions=True, ValidatesOnDataErrors=True, NotifyOnValidationError=True}" /> </Grid> </AdornerDecorator>For more information check the attached project and google AdornerLayer and AdornerDecorator.
All the best,
Panayot
the Telerik team
Rank 2