Visibility Switching Within TileView Item

2 posts, 0 answers
  1. Simon
    Simon avatar
    4 posts
    Member since:
    Nov 2009

    Posted 01 Sep 2010 Link to this post

    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>
  2. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1511 posts

    Posted 02 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top