This is a migrated thread and some comments may be shown as answers.

Accessing Controls in RadFluidContentControl

7 Answers 77 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Helen
Top achievements
Rank 2
Helen asked on 29 Mar 2011, 01:06 AM
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

7 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 31 Mar 2011, 05:55 PM
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
0
Helen
Top achievements
Rank 2
answered on 31 Mar 2011, 10:39 PM
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;
    }
}

 

 

 

 

 

 

 

 


0
Petar Mladenov
Telerik team
answered on 05 Apr 2011, 08:51 AM
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
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
0
Helen
Top achievements
Rank 2
answered on 05 Apr 2011, 04:42 PM
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>
0
Helen
Top achievements
Rank 2
answered on 05 Apr 2011, 05:26 PM
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;
             }
         }
     }
 }
0
Zarko
Telerik team
answered on 07 Apr 2011, 11:00 AM
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
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
0
Helen
Top achievements
Rank 2
answered on 08 Apr 2011, 04:42 PM
Gee, why didn't I think of that? lol

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

Cheers
Tags
TileView
Asked by
Helen
Top achievements
Rank 2
Answers by
Petar Mladenov
Telerik team
Helen
Top achievements
Rank 2
Zarko
Telerik team
Share this question
or