<Grid> <local:WorldListView x:Name="worldListView" Width="Auto" Height="Auto"/> </Grid> in Visual C#

Painting PDF-417 2d barcode in Visual C# <Grid> <local:WorldListView x:Name="worldListView" Width="Auto" Height="Auto"/> </Grid>

Figure 19.3 First version of the WorldBrowser application. Unless you re somewhat obsessive, you ll probably have fewer countries in your list.

That should do it. If you run the application now, you should get something like figure 19.3. So far, so good. We have a reasonably well-architected application that provides some useful functionality. But, it s a little boring. In the next section, we ll spice it up a little by adding some transitions which is, after all, what this chapter is supposed to be about.

Transitions can punch up the user s interactions with an application, provided they aren t overdone. In many ways, WPF is really good at handling things like transitions. Once you tell WPF what you want it to do, it takes care of all the details. On the other hand, it s sometimes quite difficult to tell WPF what it is that you want. We re going to start out by building a fade transition to switch between our two document viewers whenever a different country is selected. The details of the effect will be written in XAML, but we ll launch the transition manually whenever we change the country to make what s going on a little clearer. In fact, we re going to build two different transitions: one for fading from document viewer A to document viewer B and one to go the other way. We ll talk a little more about why we re doing this later. Listing 19.6 shows the resource section of WorldListView.xaml, which is where we re temporarily putting our transition.

<UserControl.Resources> <Duration x:Key="animationTime">0:0:0.5</Duration> <BeginStoryboard x:Key="FadeInA">

<Storyboard> Fades from B to A <DoubleAnimation Storyboard.TargetName="docReaderA" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="{StaticResource animationTime}" /> <DoubleAnimation Storyboard.TargetName="docReaderB" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="{StaticResource animationTime}" /> </Storyboard> </BeginStoryboard>

<BeginStoryboard x:Key="FadeInB"> <Storyboard> <DoubleAnimation Storyboard.TargetName="docReaderB" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="{StaticResource animationTime}" /> <DoubleAnimation Storyboard.TargetName="docReaderA" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="{StaticResource animationTime}" /> </Storyboard> </BeginStoryboard> </UserControl.Resources>

We start by creating a definition for a duration called animationTime b. We ve defined this so that, if we want to change the length of the animation, we don t have to change the value in four different places. You can see how we re referencing the value as a StaticResource in each of our animations. The first storyboard is called FadeInA c and is made up of two different animations. The first of these d changes the Opacity (or see-through-ed-ness ) of docReaderA from completely transparent (0) to completely solid (1), taking the amount of time defined in animationTime, which is currently set to half of one second. The second animation changes docReaderB from fully solid to fully transparent e. We also have another storyboard called FadeInB that does the exact opposite f. So far, so good. But, we have to execute the animations at the appropriate times for them to be of any use. We also have to make our lookup code populate the proper flow document viewer before the animation starts. To do this, we ll restructure the lb_MouseDoubleClick method (listing 19.7). Note that we ve omitted the wait cursor code to save space.

private bool showingA = true;

private void lb_MouseDoubleClick(object sender, MouseButtonEventArgs e) { ListBox lb = sender as ListBox; if (lb.SelectedItem != null) { string country = lb.SelectedItem.ToString(); FlowDocument doc = App.Current.Lookup.DefineWord(country);

if (showingA) { Finds docReaderB.Document = doc; animation doc.Background = docReaderB.Background; BeginStoryboard storyboard = FindResource("FadeInB") as BeginStoryboard; BeginStoryboard(storyboard.Storyboard); } Launches it else { docReaderA.Document = doc; doc.Background = docReaderA.Background; BeginStoryboard storyBoard = FindResource("FadeInA") as BeginStoryboard; BeginStoryboard(storyBoard.Storyboard); } showingA = !showingA; Switches

The code for determining our current viewer is a little ham-fisted, but it works. We have a bool b that we swap each time to indicate whether we re showing viewer A or viewer B. If we re showing viewer A c, we set the content from our last query in viewer B because we want it to be set before viewer B becomes visible. Then we find the appropriate Storyboard from resources using FindResource d. Next we launch the Storyboard e. This will execute the details that we ve defined in XAML. The rest of the code does the exact opposite if we re currently viewing viewer B f and then switches the current viewer g. Now, if we run the application, when we double-click between countries we get a nice fade effect between viewers (figure 19.4). This is a pretty nice effect, but there some issues. For one thing, the code isn t terribly elegant we have to go searching for the proper effect to launch. That isn t a big deal when we have a fade; but what if we want to have a few other effects that we can choose between Also, the effects are tied pretty specifically to docViewerA and docViewerB. If we want to use the effects against, say, a couple of pictures or other content, we d have to re-create our effects with different targets. In the next section, we ll present a more generic approach, one where we can arbitrarily plug in different content and different effects!