Accessing Controls in RadFluidContentControl

[Helen]

This must be easy but -- how do I access the controls in a tileviewitem when it is maximized, before it is displayed? I want to touch up image borders, etc.

Thanks

Helen

[Petar Mladenov]

Hello Helen,

You can try to use the ChildrenOfType<> telerik extension method or you can specify x:Name of the FluidControl and access it directly. Please let us know if this helps you.

Kind regards,
Petar Mladenov
the Telerik team

[Helen]

I tried both your suggestions without success. However, I found a solution that works for me.

On my Large content template, I have a border for an image. I wanted to remove that border if the image is null.

What I did was add a Loaded Event handler to Border control in the Large Content template, and handled it thus:
 

private void MyImageBorder_Loaded(object sender, RoutedEventArgs e)

{

    Border b = sender as Border;

    if (b == null) return;
      b.Visibility = Visibility.Visible;


    Image img = b.Child as Image;

    if ((img == null) || (((BitmapImage)img.Source).PixelWidth == 0))

    {

        b.Visibility = Visibility.Collapsed;

        return;

    }

}

 

 

 

 

 

 

 

 

[Petar Mladenov]

Hi Helen,

You could elaborate more on your scenario and provide the part of your xaml code you wish to use in code behind. This way we could advice you better and provide you with a better suited solution.

Best wishes,
Petar Mladenov
the Telerik team

[Helen]

Here's my Xaml:


<DataTemplate x:Key="TVContentTemplate">

    <telerik:RadFluidContentControl ContentChangeMode="Manual" State="Normal" >

        <!-- Small Content -->

        <telerik:RadFluidContentControl.SmallContent>

            <Grid >

                <Grid.RowDefinitions>

                    <RowDefinition Height="Auto" />

                    <RowDefinition Height="Auto" />

                </Grid.RowDefinitions>

                <TextBlock TextWrapping="Wrap" Margin="5,5,5,0"> 

                    <Run Text="Department: " FontWeight="Bold"></Run>

                    <LineBreak/>

                    <Run Text="{Binding Path=Department.DepartmentName}" />

                </TextBlock>

                <TextBlock TextWrapping="Wrap" Margin="5" Grid.Row="1">

                    <Run Text="Name: " FontWeight="Bold" />

                    <LineBreak/>

                    <Run Text="{Binding FirstName}" />

                    <!--<Run Text=" " />-->

                    <Run Text="{Binding LastName}" />

                </TextBlock>

            </Grid>

        </telerik:RadFluidContentControl.SmallContent>

        <!-- Normal Content -->

        <telerik:RadFluidContentControl.Content>

            <Grid>

                <Grid.RowDefinitions>

                    <RowDefinition Height="Auto" />

                    <RowDefinition Height="Auto" />

                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="Auto" />

                    <ColumnDefinition Width="*" />

                </Grid.ColumnDefinitions>

                <Image Source="{Binding imageData, Converter={StaticResource ImageConverter}}"

                       VerticalAlignment="Center"

                       Grid.Row="0"

                       Grid.Column="0"

                       Grid.RowSpan="2"

                       Margin="5,5,5,10"

                       Width="75"

                       HorizontalAlignment="Left" />

                <TextBlock TextWrapping="Wrap" Grid.Column="1" Grid.Row="0" Margin="5"> 

                    <Run Text="Department: " FontWeight="Bold"></Run>

                    <LineBreak/>

                    <Run Text="{Binding Path=Department.DepartmentName}" />

                </TextBlock>

                <TextBlock TextWrapping="Wrap" Margin="5" Grid.Column="1" Grid.Row="2">

                    <Run Text="Name: " FontWeight="Bold" />

                    <LineBreak/>

                    <Run Text="{Binding FirstName}" />

                    <!--<Run Text=" " />-->

                    <Run Text="{Binding LastName}" />

                </TextBlock>

            </Grid>

        </telerik:RadFluidContentControl.Content>

        <!-- Large Content -->

        <telerik:RadFluidContentControl.LargeContent >

            <Border BorderBrush="Black" BorderThickness="2" Width="300" Height="500" CornerRadius="5" >

                <Grid Background="{StaticResource BGBrush}" >

                    <Grid.RowDefinitions>

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto"   />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" MinHeight="45" />

                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition />

                        <ColumnDefinition />

                    </Grid.ColumnDefinitions>

                    <TextBlock TextWrapping="Wrap" Margin="5,10,5,5"  Grid.Row="0" Grid.ColumnSpan="2" HorizontalAlignment="Center">

                        <Run Text="Name: " FontWeight="Bold" FontSize="16" />

                        <Run Text="{Binding FirstName}"  FontSize="16" />

                        <!--<Run Text=" " />-->

                        <Run Text="{Binding LastName}"  FontSize="16" />

                    </TextBlock>

                    <TextBlock TextWrapping="Wrap" Grid.Row="1" Grid.ColumnSpan="2" Margin="5" HorizontalAlignment="Center" > 

                        <Run Text="Department: " FontWeight="Bold"  FontSize="16" />

                        <Run Text="{Binding Path=Department.DepartmentName}"  FontSize="16"  />

                    </TextBlock>

                    <Border x:Name="MyImageBorder" Grid.Row="2" Grid.ColumnSpan="2" Margin="5" HorizontalAlignment="Center"

                        MaxHeight="200" Style="{StaticResource ImageBorder}" MaxWidth="200" Loaded="MyImageBorder_Loaded" >

                        <Image x:Name="imgPerson" Margin="10" Stretch="Uniform" Source="{Binding imageData, Converter={StaticResource ImageConverter}}"  />

                    </Border>

                    <TextBlock TextWrapping="Wrap" Grid.Row="3" Grid.ColumnSpan="2" Margin="5" HorizontalAlignment="Center" > 

                        <Run Text="Extension: " FontWeight="Bold"  FontSize="16" />

                        <Run Text="{Binding Path=Extension}"  FontSize="16"  />

                    </TextBlock>

                    <Border Grid.Row="4" Grid.ColumnSpan="2" Margin="5" BorderBrush="Aqua" BorderThickness="1" CornerRadius="3" >

                        <Grid x:Name="grdDial"  >

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="*" />

                                <ColumnDefinition Width="100" />

                            </Grid.ColumnDefinitions>

                            <TextBlock x:Name="txtInstruction" Grid.Row="4"  Margin="5"  FontSize="16"

                                Text="To call, pick up the phone and press the 'Dial' button" TextWrapping="Wrap"/>

                            <Button x:Name="btnDial" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Height="30" Style="{StaticResource GlassButton}" 

                                FontSize="16" Margin="5" Padding="10,5,10,5"

                                Content="  Dial  " Click="btnDial_Click" />

                        </Grid>

                    </Border>

                    <Button x:Name="btnCancel" Grid.Row="5" Grid.ColumnSpan="2"  HorizontalAlignment="Center" Style="{StaticResource GlassButton}" 

                        FontSize="16" Margin="5" 

                        Content="  Close  " Click="btnClose_Click" />

                </Grid>

            </Border>

        </telerik:RadFluidContentControl.LargeContent>

    </telerik:RadFluidContentControl>

</DataTemplate>

[Helen]

Further to my last post, I've included the code behind for the tileStateChanged event.

The ChildrenOfType<Border>() would populate a list of borders, but the Name property was always empty. Is this a bug?

private void tileView_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
 {
     RadTileViewItem item = e.Source as RadTileViewItem;
     if (item != null)
     {
         RadFluidContentControl fluidControl = item.ChildrenOfType<RadFluidContentControl>().First();
         if (fluidControl != null)
         {
             switch (item.TileState)
             {
                 case TileViewItemState.Maximized:
                     fluidControl.State = FluidContentControlState.Large;
                     //MessageBox.Show("Maximized");
                     IList<Border> borders = item.ChildrenOfType<Border>();
                     IList<Border> borders2 = fluidControl.ChildrenOfType<Border>();
                     IList<Image> img = item.ChildrenOfType<Image>();
                     break;
                 case TileViewItemState.Minimized:
                     fluidControl.State = FluidContentControlState.Small;
                     break;
                 case TileViewItemState.Restored:
                     fluidControl.State = FluidContentControlState.Normal;
                     break;
             }
         }
     }
 }

[Zarko]

Hello Helen,

 The problems comes from the TransitionControl because it delays the actual change of the content and when you handle the TileStateChanged event the maximized item is still with the restored content. You can work around this issue by manually finding the correct content(the Large Content in your case) like this:

private void myTileView_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
    var container = e.OriginalSource as RadTileViewItem;
    if (container != null)
    {
        if (container.TileState == TileViewItemState.Maximized)
        {
            if (container.ChildrenOfType<RadFluidContentControl>().Count > 0)
            {
                var fluidControl = container.ChildrenOfType<RadFluidContentControl>()[0];
                var myBorder = (fluidControl.LargeContent as Border).ChildrenOfType<Border>().Where(b => b.Name == "MyImageBorder").FirstOrDefault();
                myBorder.BorderThickness = new Thickness(5);
            }
        }
    }
}

If you have further questions feel free to ask.

Best wishes,
Zarko
the Telerik team

[Helen]

Gee, why didn't I think of that? lol

Thanks guys -- I'll give it a whilr.

Cheers