Between PageFlipStarted and PageFlipEnded

[Ingemar]

My problem occur when I change the opacity of a textblock from 1.0 to 0.0 while flipping the page. The textblock is in a datatemplate and the opacity is bound to a variable in the datacontext. The behavior I get with the different events are the following:

PageFlipStarted:

Text on page 2 (old page) will disappear before the page has flipped

Text on page 4 (new page) ok i.e. no text is shown at all

PageFlipEnded & PageChanged

Text on page 2 (new page) ok i.e. the text remains 

Text on page 4 (new page) will show before it disappears

What I would like is:

Text on page 2 (new page) ok i.e. the text remains 

Text on page 4 (new page) ok i.e. no text is shown at all

Any ideas? Preferable without playing around in the visual tree. 

(I have been playing around in the visual tree as well but did not manage to solve the problem that way either) 

The essential parts of the XAML looks like 

<Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <DataTemplate x:Key="LeftPageTemplate">
                <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </DataTemplate>
            <DataTemplate x:Key="RightPageTemplate">
                    <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"
                               Opacity="{Binding ElementName=aBook, Path=DataContext.OpacityCollection[1]}"
                               Visibility="{Binding ElementName=aBook, Path=DataContext.VisabilityCollection[1]}"/>
            </DataTemplate>
        </Grid.Resources>
        <telerikNavigation:RadBook PageChanged="aBook_PageChanged"
                                   PageFlipStarted="aBook_PageFlipStarted"
                                   PageFlipEnded="aBook_PageFlipEnded"
                                   LeftPageTemplate="{StaticResource LeftPageTemplate}"
                                   RightPageTemplate="{StaticResource RightPageTemplate}"
                                   ItemsSource="{Binding TextCollection}"
                                   x:Name="aBook"/>
    </Grid>

And the C#

    public partial class MainPage : UserControl
    {
        PageData pg;
        public MainPage()
        {
            InitializeComponent();
            pg = new PageData();
        }

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            aBook.DataContext = pg;
        }

        private void aBook_PageChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
        {
            /*
             *Page 2 ok
             *Text on page 4 will show before it disapears
             */

           // pg.OpacityCollection[1] = 0.0;
           // pg.VisabilityCollection[1] = Visibility.Collapsed;
        }

        private void aBook_PageFlipEnded(object sender, Telerik.Windows.Controls.PageFlipEventArgs e)
        {
            /*
             *Page 2 ok
             *Text on page 4 will show before it disapears
             */

            //pg.OpacityCollection[1] = 0.0;
            // pg.VisabilityCollection[1] = Visibility.Collapsed;
        }

        private void aBook_PageFlipStarted(object sender, Telerik.Windows.Controls.PageFlipEventArgs e)
        {
            /*
             *Page 4 ok
             *Text on page 2 will disapear before the page has flipped
             */

               pg.OpacityCollection[1] = 0.0;
            // pg.VisabilityCollection[1] = Visibility.Collapsed;
        }
    }

    public class PageData
    {
        public ObservableCollection<string> TextCollection { get; set; }
        public ObservableCollection<double> OpacityCollection { get; set; }
        public ObservableCollection<Visibility> VisabilityCollection { get; set; }

        public PageData()
        {
            TextCollection = new ObservableCollection<string>() { "Page 1", "Page 2", "Page 3", "Page 4" };
            OpacityCollection = new ObservableCollection<double>() { 1.0, 1.0 };
            VisabilityCollection = new ObservableCollection<Visibility>() { Visibility.Visible, Visibility.Visible };
        }
    }
}

[Kiril Stanoev]

Hi Ingemar,

I've been investigating your scenario, but I am not sure that I really understand what the issue is. The code you've provided us with works as expected. The TextBlock on Page2 hides properly since you are setting its Opacity to 0.0 when the flip starts. Also, I was not able to reproduce the "Text on page 4 (new page) will show before it disappears" issue. I am attaching my sample project. Could you please have a look at it and let me know if I am doing anything wrong. Also, could you elaborate a little bit more on what you're trying to achieve. I'd be glad to further assist you.

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.

[Ingemar]

Hi Kiril,

Your code sample is correct and has the same behavior as I described in my first post is there. 

My problem has just to do with the visual impression of the right page text when turning a page. It is in the timing of when the opacity of the text changes on two consecutive pages. In this example we have only the text "Page 2". When you as I have the page full of text in a number of different textblock the visual expression could be better.
What I do in the app is to start with a blank page and step-by-step show a solution (i.e. changing the opacity of consecutive textblocks). When I turn the page I want to start with a blank page. But I dont want the text on the old page to disappear before that page no longer is visable.

The problem as I see it is that the opacity changes (more or less) at the same time on the two pages.There is no middle ground where I can keep the text visable on the old page until it no longer can be seen and at the same time start with a new blank page.

I hope this clarifies my little problem. Perhaps it should not be called a problem but a suggestion for more fine grained events between PageFlipStarted and PageFlipEnded.

Best regards,
Ingemar Johansson

[Kiril Stanoev]

Hello Ingemar,

Thank you for your clarification. Could you please elaborate a little bit more on your feature request? What kind of an event would you like to be fired between PageFlipStarted and PageFlipEnter and at what particular condition this event should be fired. You might know it, but here's a list of the events RadBook currently exposes:

FoldActivated - called as soon as the mouse enters any of the corners of a page



PreviewPageFlipStarted and PageFlipStared - these events get fired as soon as the left button of the mouse is pressed while the fold(corner) is activated



Now if you release the mouse and the mouse has not traveled more than half of the book, then only the FoldDeactivated and PageFlipEnded events will be fired. If the mouse has traveled more than half the width of the book, then along with FoldDeactivated and PageFlipEnded, the PageChanged event will be fired as well.



Let me know if you manage to achieve your goal with the current sequence of events. Additionally, I'd be glad to hear more about any feedback you might have regarding this scenario.

Sincerely yours,
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.

[Ingemar]

Hello Kiril,

None of the mentioned events help me out.
In the visual tree of the RadBook the visual elements of pages that are not yet shown (i.e. the new page) are already
populated. When the page is flipped the visual element for a bound textblock on the old page is changed more or less
simultaneous as the visual element on the new page. This gives the effect that I have described above. I would like an event
that takes place when the oldpage is not visible anymore (i.e. OldPageNotVisableAnymoreEvent) but before the similar event
NewPageNotVisableYetEvent. This would give the functionality that I would like as I then could change the opacity in either one (as long as the change in the visual tree is performed "directly").

I hope this clarifies my problem/request.

Kind regards,
//Ingemar

[Kiril Stanoev]

Hello Ingemar,

Thank you for the clarification. I've logged your feature request in our PITS under the name "Book: New event fired between PageFlipStarted and PageFlipEnded". It will be available for tracking tomorrow the latest. You can vote for that item and if it gathers enough popularity we will definitely implement it. Meanwhile, if you have additional questions or comments, let me know.

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.