Which TileViewItem has the Focus

[Kathleen]

I would like an example of how to change the header template, based upon whether the TileViewItem is the currently focused item or not.

Thank you

[Kiril Stanoev]

Hi Kathleen,

Currently this scenario is not supported yet, since RadTileViewItem does not focus itself internally when a drag is being initiated. For next week's internal build we have plans to support this scenario. For example, imagine you define your TileViewItems in XAML:

<telerikNavigation:RadTileView x:Name="tileView1">
    <telerikNavigation:RadTileViewItem Header="RED" Background="Red"
            GotFocus="RadTileViewItem_GotFocus" LostFocus="RadTileViewItem_LostFocus" />
    <telerikNavigation:RadTileViewItem Header="GREEN" Background="Green"
            GotFocus="RadTileViewItem_GotFocus" LostFocus="RadTileViewItem_LostFocus" />
    <telerikNavigation:RadTileViewItem Header="BLUE" Background="Blue"
            GotFocus="RadTileViewItem_GotFocus" LostFocus="RadTileViewItem_LostFocus" />
    <telerikNavigation:RadTileViewItem Header="YELLOW" Background="Yellow"
            GotFocus="RadTileViewItem_GotFocus" LostFocus="RadTileViewItem_LostFocus" />
    <telerikNavigation:RadTileViewItem Header="PURPLE" Background="Purple"
            GotFocus="RadTileViewItem_GotFocus" LostFocus="RadTileViewItem_LostFocus" />
    <telerikNavigation:RadTileViewItem Header="ORANGE" Background="Orange"
            GotFocus="RadTileViewItem_GotFocus" LostFocus="RadTileViewItem_LostFocus" />
</telerikNavigation:RadTileView>

Then in code-behind you decide to change the header of the focused element:

string originalTitle;

public MainPage()
{
    InitializeComponent();
}

private void RadTileViewItem_GotFocus(object sender, RoutedEventArgs e)
{
    RadTileViewItem item = e.OriginalSource as RadTileViewItem;
    this.originalTitle = string.Format(item.Header.ToString());
    string newTitle = string.Format("Now Dragging {0}", this.originalTitle);
    item.Header = newTitle;
}

private void RadTileViewItem_LostFocus(object sender, RoutedEventArgs e)
{
    RadTileViewItem item = e.OriginalSource as RadTileViewItem;
    item.Header = this.originalTitle;
}

I am attaching a video file showing a sample output. Could you please take a look at the video file and let me know whether this is an expected outcome from the above scenario.

Best wishes,
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.

[Kathleen]

Yes, this is exactly what we're looking for.  

Thanks

[Kathleen]

this is what I have right now:

protected override void OnGotFocus(RoutedEventArgs e)
        {
            base.OnGotFocus(e);

            if ((this.Header as Label).FontWeight == FontWeights.Normal);
            {
                BorderBrush = (Brush)this.Resources["TileView_OuterBorder_Focused"];

                (this.Header as Label).FontWeight = FontWeights.Bold;
                Border border = base.GetTemplateChild("HeaderBar") as Border;
                if (border != null)
                {
                    border.Background = (Brush)this.Resources["TileView_HeaderBackground_Focused"];
                }
            }

        }

Seems to be doing what I want, except for if I click on the header item alone, this event doesn't trigger.  Is the next internal build addressing that, based on your example?

[Kiril Stanoev]

Hi Kathleen,

Yes, this scenario will be covered as well. Once you download this week's internal build, give it a try and let me know if you experience any issues. I'd be glad to further assist you.

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.

[Kathleen]

Kiril,

I am using the 5/28 internal build and I'm not exactly seeing the same functionality as you. 

I believe the reason why is because my RadTileView is hosted inside a scrollviewer.  Change your XAML to below and you will find that the red TileView always gets focus when you click on the header bar of any of the items.

The scrollviewer is because we are using prism modularity, I tried using other container controls, but did not have much luck.

 

<Grid x:Name="LayoutRoot" Background="White">
        <ScrollViewer IsTabStop="False">
            <telerikNavigation:RadTileView x:Name="tileView1" IsTabStop="False">
                <telerikNavigation:RadTileViewItem Header="RED" Background="Red"
                GotFocus="RadTileViewItem_GotFocus" LostFocus="RadTileViewItem_LostFocus" />
                <telerikNavigation:RadTileViewItem Header="GREEN" Background="Green"
                GotFocus="RadTileViewItem_GotFocus" LostFocus="RadTileViewItem_LostFocus" />
                <telerikNavigation:RadTileViewItem Header="BLUE" Background="Blue"
                GotFocus="RadTileViewItem_GotFocus" LostFocus="RadTileViewItem_LostFocus" />
                <telerikNavigation:RadTileViewItem Header="YELLOW" Background="Yellow"
                GotFocus="RadTileViewItem_GotFocus" LostFocus="RadTileViewItem_LostFocus" />
                <telerikNavigation:RadTileViewItem Header="PURPLE" Background="Purple"
                GotFocus="RadTileViewItem_GotFocus" LostFocus="RadTileViewItem_LostFocus" />
                <telerikNavigation:RadTileViewItem Header="ORANGE" Background="Orange"
                GotFocus="RadTileViewItem_GotFocus" LostFocus="RadTileViewItem_LostFocus" />
            </telerikNavigation:RadTileView>
        </ScrollViewer>
    </Grid>

[Kiril Stanoev]

Hello Kathleen,

 Thank you for further elaborating on your scenario. With this week's internal build we will make sure to cover this scenario as well. Please find attached a sample project that contains a work-in-progress version of our controls. Let me know if you still manage to reproduce the issue.

All the best,
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.

[Kathleen]

Great, I will check out the next internal build and let you know what I find.

[Kathleen]

Hi,

There was no internal builds this week, due to the release of SP2.  I downloaded it but find that this is still an issue.

Do you have any suggestions?  RIght now, when I click on the header of any TileView, the focus moves to the first item in the container.

Thanks

Kathleen

[Kiril Stanoev]

Hello Kathleen,

The fix did not make it in the 0603 binaries. This week's internal build is supposed to contain the fix. If you'd like you can wait an try it out. Another option is if you are using Silverlight 4 to download our Beta binaries (0609) where the issue is not longer present. Let me know if I can be of further assistance.

All the best,
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.

[Kathleen]

Kiril,

Thanks again for your reply, I will check into the next internal build, I just wasn't sure if there would be new ones so close to the SP release.

I have been looking for alternative solutions to this issue, since its only present when I contain the dashlets in a prism region hosted by a Scrollviewer.  If I host it in an ContentPresenter, the problem goes away, however, it breaks the way the views deactivate/activate.  I've also tried the RadDockPane, and a few other controls with varying luck but no real solution.

Is there a radical change between the internal Beta build and SP2?  We are slated to go to User Acceptance testing at the end of this month, and I'm leary about using beta bits.

Thanks

Kathleen

[Kiril Stanoev]

Hello Kathleen,

There are certain fixes between the SP and Beta. If you are afraid to use the Beta bits, I'd suggest you wait for our final (Q2 2010) release which is scheduled for the middle of July this year.

On a side note, I'd like to inform you that we've just released an online tool that allows you to reduce the size of your Silverilght applications. For more information, please visit http://blogs.telerik.com/blogs/posts/10-06-10/telerik_assembly_minifier.aspx

Best wishes,
Kiril Stanoev
the Telerik team

[Kathleen]

Hello :)  I installed the beta, the functionality is improved but still not quite as expected.

In your sample, double click on the header of the purple item to maximize it. Note that the label goes back to "Red is dragging"

Then click the header of any of the non maximized items, the red one continues to hold focus.

[Kiril Stanoev]

Hello Kathleen,

I made some changes to the way RadTileViewItem's header handles MouseLeftButtonDown event. Have a look at the attached project and let me know if everything works as expected. I've also updated your Telerik account. Let me know how it goes.

Greetings,
Kiril Stanoev
the Telerik team

[Kathleen]

Yes, now the minimized items claim to get the focus.

I still see two other potential problems, which match what we are seeing in our production application that I'm hoping can be looked into.  I replicated it in your sample application both with the scrollviewer and commenting out the scrollviewer.

1.  If you click on the header of any colored item within say a 15 px border from the edge of the dashlet then the red title claims it has focus.
2.  If you click on the header of the Blue tile, it says it has focus.  If you click on the Blue box below it.  The Red Tile claims it is the focused tile.

Thanks

Kathleen

[Kiril Stanoev]

Hello Kathleen,

There is actually a quick solution to this (you might not even need my fixes so far :) ).

public MainPage()
{
    InitializeComponent();

    foreach (RadTileViewItem item in tileView1.Items)
    {
        item.AddHandler(FrameworkElement.MouseLeftButtonDownEvent, new MouseButtonEventHandler(TileViewItem_MouseLeftButtonDown), true);
    }
}

private void TileViewItem_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Dispatcher.BeginInvoke(() =>
    {
        (sender as RadTileViewItem).Focus();
    });
}

Listen for the MouseLeftButtonDown event for every TileViewItem. As soon as someone presses the mouse left button while being over a TileViewItem, the MouseLeftButtonDown will get executed. In the event handler just focus the clicked TileViewItem. This probably will do the trick. Give it a try and let me know if it helps.

Sincerely yours,
Kiril Stanoev
the Telerik team

[Kathleen]

I had to modify your solution slightly because the code did not compile directly as is.

Also, need to add some logic in there to only call that code if the RadTileViewItem didn't already have focus, otherwise it rendered setting focus to hosted controls impossible. (ie our command links stopped working).

In our case, the focused control has a Bold Header so the code ended up looking something like this (Where DashletView is just a view of type RadTileViewitem:

private

 

 

void TileViewItem_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

 

{

 

 

 

var action=new Action<object>(OnLeftMouseButtonDown);

 

Dispatcher.BeginInvoke(action, sender);

}

 

 

private static void OnLeftMouseButtonDown(object sender)

 

{

 

 

var item = (DashletView) sender;

 

 

 

if (item == null) return;

 

 

 

if (((Label) item.Header).FontWeight != FontWeights.Normal) return;

 

item.Focus();

}

Now all the issues we were having appear to have been resolved.

Thank you!

[Kiril Stanoev]

Hi Kathleen,

I'm glad I helped. If you have additional questions or comments, don't hesitate to contact us.

Greetings,
Kiril Stanoev
the Telerik team