Visibility Switching Within TileView Item

[Simon]

Hi there

I've create a dashboard type screen, which uses restyled radio buttons to change the specific information displayed.

I have three grids, each containg radcharts and gauges, the visibility of each is bound to the IsChecked property of one of the restyled radio buttons using Element Name and a boolean to visibility converter.

This all works fine, with the appropriate charts etc being displayed when a particular radio button is selected. However when I place this inside a TileViewItem within the LargeContent section of the RadFluidContentControl. The functionality no longer works and all grids are displayed at once on top of each other and the radio buttons have no effect.

the BooleanTo Visibility Converter is held in the code behind and referenced in the Window.Resources - I have also tried moving the reference to RadTileViewItem.Resources and even Grid.Resources further down the visual tree towards where it is used, but this makes no difference, as I'm pretty sure it's not even getting as far as attempting to use it:

When I run through VS2010 (I'm generally a Blend person!) I do get Binding errors, which seems to suggest that the radio buttons cannot be 'found':

System.Windows.Data Error: 4 : Cannot find source for binding with reference 'ElementName=DistributorButton'. BindingExpression:Path=IsChecked; DataItem=null; target element is 'Grid' (Name='DistributorGrid'); target property is 'Visibility' (type 'Visibility')

Any help would be greatly appreciated as I really do not understand how it can work perfectly outside the tileview control and not at all when the exact same xaml is placed within the control?

RadTileItem Xaml Below -

<telerikNavigation:RadTileViewItem Header="Summary" telerik:Theming.Theme="Windows7">
                <telerik:RadFluidContentControl ContentChangeMode="Manual" >

                    <telerik:RadFluidContentControl.SmallContent>
                        <Grid Width="150" Height="Auto">
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                                <Image Source="Images/Prog_48.png" Height="24" Width="24"/>

                            </StackPanel>
                        </Grid>
                    </telerik:RadFluidContentControl.SmallContent>

                    <telerik:RadFluidContentControl.LargeContent>
                        <Grid Background="{StaticResource Midnight2}">

                            <Grid Width="Auto" Height="Auto" Background="{DynamicResource OverlayPanelLB}">

                                    <Border Margin="5" BorderBrush="{StaticResource PanelBorderLB}" Background="{DynamicResource MidnightBar1}" BorderThickness="2" CornerRadius="3"/>
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="35"/>
                                                <RowDefinition Height="*"/>
                                            </Grid.RowDefinitions>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="*"/>

                                            </Grid.ColumnDefinitions>

                                            <Border Grid.Row="0" Margin="7,7,7,0" Grid.ColumnSpan="2" CornerRadius="2,2,0,0" Background="{DynamicResource GeneralToolBarBrush}" BorderThickness="0,0,0,0.4" BorderBrush="White" />

                                                <StackPanel Grid.Row="0" Grid.Column="0"  Orientation="Horizontal" HorizontalAlignment="Left" Margin="25,0,0,0" VerticalAlignment="Center">
                                                    <Label Foreground="{DynamicResource GeneralLabelBrushBrush}" FontWeight="Bold" HorizontalAlignment="Center" Margin="0,4,4,0" >View By</Label>
                                                    <RadioButton x:Name="DistributorButton"  IsChecked="True"  Style="{StaticResource RadioToggle}" Content="Distributor" Width="80" Height="22" VerticalAlignment="Center" Margin="0,5,5,0" Background="{x:Null}" BorderBrush="{DynamicResource OverlayPanelLB}" BorderThickness="1" Foreground="{DynamicResource GeneralLabelBrushBrush}"/>
                                                    <RadioButton x:Name="GenreButton" Style="{StaticResource RadioToggle}" Content="Genre" Width="80" Height="22" VerticalAlignment="Center" Margin="0,5,5,0" Background="{x:Null}" BorderBrush="{DynamicResource OverlayPanelLB}" BorderThickness="1" Foreground="{DynamicResource GeneralLabelBrushBrush}"/>
                                                    <RadioButton x:Name="CertificateButton" Style="{StaticResource RadioToggle}" Content="Certification" Width="80" Height="22" VerticalAlignment="Center" Margin="0,5,0,0" HorizontalAlignment="Center" Background="{x:Null}" BorderBrush="{DynamicResource OverlayPanelLB}" BorderThickness="1" Foreground="{DynamicResource GeneralLabelBrushBrush}"/>
                                                </StackPanel>

                                                <StackPanel Grid.Row="0" Grid.Column="1"  Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,0,25,0" VerticalAlignment="Center">
                                                    <Label Foreground="{DynamicResource GeneralLabelBrushBrush}" FontWeight="Bold" HorizontalAlignment="Center" Margin="0,4,4,0" >Date Period</Label>
                                                    <telerikInput:RadDatePicker Width="120" Height="20" telerik:Theming.Theme="Windows7" VerticalAlignment="Center" Margin="0,5,0,0" />
                                                </StackPanel>

                                            <Grid x:Name="DistributorGrid" Visibility="{Binding IsChecked, ElementName=DistributorButton, Converter={StaticResource BooleanToVisibilityConverter}}" Grid.Row="1" Grid.ColumnSpan="2">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="3*"/>
                                                    <ColumnDefinition Width="2*"/>
                                                    <ColumnDefinition Width="4*"/>

                                                </Grid.ColumnDefinitions>

                                            <telerikChart:RadChart Grid.Column="0" x:Name="radChart" Content="" LegendStyle="{StaticResource LegendStyle1}" Margin="10" VerticalAlignment="Center" Background="{x:Null}" BorderBrush="{x:Null}" BorderThickness="2" AxisElementBrush="White" AxisForeground="White">
                                                    <telerikChart:RadChart.SeriesMappings>

                                                        <telerikCharting:SeriesMapping LegendLabel="Product Sales">

                                                            <telerikCharting:SeriesMapping.SeriesDefinition>
                                                                <telerikCharting:DoughnutSeriesDefinition></telerikCharting:DoughnutSeriesDefinition>
                                                            </telerikCharting:SeriesMapping.SeriesDefinition>

                                                            <telerikCharting:SeriesMapping.ItemMappings>
                                                                <telerikCharting:ItemMapping DataPointMember="XCategory" FieldName="MonthName"></telerikCharting:ItemMapping>
                                                                <telerikCharting:ItemMapping DataPointMember="YValue" FieldName="Quantity"></telerikCharting:ItemMapping>
                                                            </telerikCharting:SeriesMapping.ItemMappings>

                                                        </telerikCharting:SeriesMapping>
                                                    </telerikChart:RadChart.SeriesMappings>
                                                </telerikChart:RadChart>



                                            <telerikGrid:RadGridView Grid.Column="1" Margin="10" ShowGroupPanel="False" telerik:Theming.Theme="Windows7" />


                                            <telerikChart:RadChart Grid.Column="2" x:Name="radChart1" Content="" LegendStyle="{StaticResource LegendStyle1}" Margin="10" VerticalAlignment="Center" Background="{x:Null}" BorderBrush="{x:Null}" BorderThickness="2" AxisForeground="White" AxisElementBrush="White">
                                                    <telerikChart:RadChart.SeriesMappings>

                                                        <telerikCharting:SeriesMapping LegendLabel="Product Sales">

                                                            <telerikCharting:SeriesMapping.SeriesDefinition>
                                                                <telerikCharting:HorizontalStackedBarSeriesDefinition></telerikCharting:HorizontalStackedBarSeriesDefinition>
                                                            </telerikCharting:SeriesMapping.SeriesDefinition>

                                                            <telerikCharting:SeriesMapping.ItemMappings>
                                                                <telerikCharting:ItemMapping DataPointMember="XCategory" FieldName="MonthName"></telerikCharting:ItemMapping>
                                                                <telerikCharting:ItemMapping DataPointMember="YValue" FieldName="Quantity"></telerikCharting:ItemMapping>
                                                            </telerikCharting:SeriesMapping.ItemMappings>

                                                        </telerikCharting:SeriesMapping>
                                                    </telerikChart:RadChart.SeriesMappings>
                                                </telerikChart:RadChart>

                                            </Grid>




                                        <Grid x:Name="GenreGrid" Visibility="{Binding IsChecked, ElementName=GenreButton, Converter={StaticResource BooleanToVisibilityConverter}}" Grid.Row="1" Grid.ColumnSpan="2">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="3*"/>
                                                    <ColumnDefinition Width="4*"/>
                                                    <ColumnDefinition Width="2*"/>

                                                </Grid.ColumnDefinitions>

                                            <telerikChart:RadChart Grid.Column="0" x:Name="radChart2" Content="" LegendStyle="{StaticResource LegendStyle1}" Margin="10" VerticalAlignment="Center" Background="{x:Null}" BorderBrush="{x:Null}" BorderThickness="2" AxisElementBrush="White" AxisForeground="White">
                                                    <telerikChart:RadChart.SeriesMappings>

                                                        <telerikCharting:SeriesMapping LegendLabel="Product Sales">

                                                            <telerikCharting:SeriesMapping.SeriesDefinition>
                                                                <telerikCharting:DoughnutSeriesDefinition></telerikCharting:DoughnutSeriesDefinition>
                                                            </telerikCharting:SeriesMapping.SeriesDefinition>

                                                            <telerikCharting:SeriesMapping.ItemMappings>
                                                                <telerikCharting:ItemMapping DataPointMember="XCategory" FieldName="MonthName"></telerikCharting:ItemMapping>
                                                                <telerikCharting:ItemMapping DataPointMember="YValue" FieldName="Quantity"></telerikCharting:ItemMapping>
                                                            </telerikCharting:SeriesMapping.ItemMappings>

                                                        </telerikCharting:SeriesMapping>
                                                    </telerikChart:RadChart.SeriesMappings>
                                                </telerikChart:RadChart>

                                            <telerikChart:RadChart Grid.Column="1" x:Name="radChart3" Content="" LegendStyle="{StaticResource LegendStyle1}" Margin="10" VerticalAlignment="Center" Background="{x:Null}" BorderBrush="{x:Null}" BorderThickness="2" AxisForeground="White" AxisElementBrush="White">
                                                    <telerikChart:RadChart.SeriesMappings>

                                                        <telerikCharting:SeriesMapping LegendLabel="Product Sales">

                                                            <telerikCharting:SeriesMapping.SeriesDefinition>
                                                                <telerikCharting:LineSeriesDefinition></telerikCharting:LineSeriesDefinition>
                                                            </telerikCharting:SeriesMapping.SeriesDefinition>

                                                            <telerikCharting:SeriesMapping.ItemMappings>
                                                                <telerikCharting:ItemMapping DataPointMember="XCategory" FieldName="MonthName"></telerikCharting:ItemMapping>
                                                                <telerikCharting:ItemMapping DataPointMember="YValue" FieldName="Quantity"></telerikCharting:ItemMapping>
                                                            </telerikCharting:SeriesMapping.ItemMappings>

                                                        </telerikCharting:SeriesMapping>
                                                    </telerikChart:RadChart.SeriesMappings>
                                                </telerikChart:RadChart>

                                                <telerik1:RadGauge Name="radGauge" Grid.Column="2" MinWidth="140" MaxWidth="160" Margin="5,0,15,0">
                                                <telerik1:RadialGauge Background="{StaticResource RadialBG}">
                                                <telerik1:RadialScale Min="0" Max="1000">
                                                  <telerik1:IndicatorList>
                                                    <telerik1:Needle Value="400"/>
                                                    <telerik1:RadialBar Name="radialBar"
                                                          StartWidth="0.01"
                                                          EndWidth="0.1"
                                                          Location="OverCenter"
                                                          Offset="0"
                                                          EmptyFill="Transparent"
                                                          Background="{StaticResource GreenBar}"
                                                          BorderBrush="Transparent"
                                                          StrokeThickness="0"
                                                          Value="400"/>

                                                  </telerik1:IndicatorList>
                                                 </telerik1:RadialScale>
                                                </telerik1:RadialGauge>
                                                </telerik1:RadGauge>


                                            </Grid>


                                            <Grid x:Name="CertificateGrid" Visibility="{Binding IsChecked, ElementName=CertificateButton, Converter={StaticResource BooleanToVisibilityConverter}}" Grid.Row="1" Grid.ColumnSpan="2">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="3*"/>
                                                    <ColumnDefinition Width="4*"/>
                                                    <ColumnDefinition Width="2*"/>

                                                </Grid.ColumnDefinitions>

                                            <telerikChart:RadChart Grid.Column="0" x:Name="radChart4" Content="" LegendStyle="{StaticResource LegendStyle1}" Margin="10" VerticalAlignment="Center" Background="{x:Null}" BorderBrush="{x:Null}" BorderThickness="2" AxisElementBrush="White" AxisForeground="White">
                                                    <telerikChart:RadChart.SeriesMappings>

                                                        <telerikCharting:SeriesMapping LegendLabel="Product Sales">

                                                            <telerikCharting:SeriesMapping.SeriesDefinition>
                                                                <telerikCharting:DoughnutSeriesDefinition></telerikCharting:DoughnutSeriesDefinition>
                                                            </telerikCharting:SeriesMapping.SeriesDefinition>

                                                            <telerikCharting:SeriesMapping.ItemMappings>
                                                                <telerikCharting:ItemMapping DataPointMember="XCategory" FieldName="MonthName"></telerikCharting:ItemMapping>
                                                                <telerikCharting:ItemMapping DataPointMember="YValue" FieldName="Quantity"></telerikCharting:ItemMapping>
                                                            </telerikCharting:SeriesMapping.ItemMappings>

                                                        </telerikCharting:SeriesMapping>
                                                    </telerikChart:RadChart.SeriesMappings>
                                                </telerikChart:RadChart>

                                            <telerikChart:RadChart Grid.Column="1" x:Name="radChart5" Content="" LegendStyle="{StaticResource LegendStyle1}" Margin="10" VerticalAlignment="Center" Background="{x:Null}" BorderBrush="{x:Null}" BorderThickness="2" AxisForeground="White" AxisElementBrush="White">
                                                    <telerikChart:RadChart.SeriesMappings>

                                                        <telerikCharting:SeriesMapping LegendLabel="Product Sales">

                                                            <telerikCharting:SeriesMapping.SeriesDefinition>
                                                                <telerikCharting:AreaSeriesDefinition></telerikCharting:AreaSeriesDefinition>
                                                            </telerikCharting:SeriesMapping.SeriesDefinition>

                                                            <telerikCharting:SeriesMapping.ItemMappings>
                                                                <telerikCharting:ItemMapping DataPointMember="XCategory" FieldName="MonthName"></telerikCharting:ItemMapping>
                                                                <telerikCharting:ItemMapping DataPointMember="YValue" FieldName="Quantity"></telerikCharting:ItemMapping>
                                                            </telerikCharting:SeriesMapping.ItemMappings>

                                                        </telerikCharting:SeriesMapping>
                                                    </telerikChart:RadChart.SeriesMappings>
                                                </telerikChart:RadChart>

                                                <telerik1:RadGauge Name="radGauge1" Grid.Column="2" Margin="25,25,25,25" HorizontalAlignment="Center" MaxWidth="120" MinWidth="100">
                                                <telerik1:LinearGauge Background="{StaticResource RadialBG}">
                                                <telerik1:LinearScale Min="0" Max="1000">
                                                  <telerik1:IndicatorList>
                                                    <telerik1:Marker RelativeHeight="0.05" Value="400"/>
                                                    <telerik1:LinearBar Name="linearBar"
                                                          StartWidth="0.07"
                                                          EndWidth="0.07"
                                                          Location="OverCenter"
                                                          Offset="0"
                                                          EmptyFill="Transparent"
                                                          BorderBrush="Transparent"
                                                          StrokeThickness="0"
                                                          Value="400"
                                                          Background="{DynamicResource GreenBar}">

                                                    </telerik1:LinearBar>

                                                  </telerik1:IndicatorList>
                                                 </telerik1:LinearScale>
                                                </telerik1:LinearGauge>
                                                </telerik1:RadGauge>


                                            </Grid>



                                        </Grid>


                                    </Grid>
                                </Grid>
                    </telerik:RadFluidContentControl.LargeContent>
                </telerik:RadFluidContentControl>
            </telerikNavigation:RadTileViewItem>

[Kiril Stanoev]

Hi Simon,

Could you please download our latest internal build (0827) and give it a try. There were some problems with ElementBinding wihing LargeContent which were only for WPF, and I believe the issue has been fixed with our latest internal build. Give it a try and let me know if the issue is still present.

Kind regards,
Kiril Stanoev
the Telerik team