Step 2 of 4: Adding Content to the Book Control
In This Topic
In this step you'll add content to the C1Book control in design-time, XAML markup, and code to create a virtual book with several pages that can be turned. To customize your project and add content to the C1Book control in your application, complete the following steps:
- Edit the markup so that it resembles the following:
| Markup |
Copy Code
|
<Border Grid.Row="1">
<Grid>
<Extended:C1Book x:Name="book" Height="450" Width="600">
</Extended:C1Book>
</Grid>
</Border>
|
- Within the <Extended: C1Book> </Extended: C1Book> tags, add the following XAML markup. This will add several templates to the markup:
| Markup |
Copy Code
|
<Extended:C1Book.LeftPageTemplate>
<ControlTemplate TargetType="ContentControl">
<Border Background="WhiteSmoke" BorderBrush="WhiteSmoke" BorderThickness="10 10 0 10">
<ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" />
</Border>
</ControlTemplate>
</Extended:C1Book.LeftPageTemplate>
<Extended:C1Book.RightPageTemplate>
<ControlTemplate TargetType="ContentControl">
<Border Background="WhiteSmoke" BorderBrush="WhiteSmoke" BorderThickness="10 10 0 10">
<ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" />
</Border>
</ControlTemplate>
</Extended:C1Book.RightPageTemplate>
<Extended:C1Book.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.Background>
<LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
<GradientStop Color="#FFE2E8EB" Offset="0.2"/>
<GradientStop Color="#FFEEF4F7" Offset="0.3"/>
<GradientStop Color="#FFE2E8EB" Offset="0.4"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Source="{Binding Path=CoverUri}" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1"/>
<TextBlock Text="{Binding Path=Title}" TextWrapping="Wrap" TextAlignment="Left" FontSize="11" FontWeight="Bold" Margin="10,7,10,10" Foreground="#FF22445F"/>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="2" Grid.RowSpan="1" Margin="10,7,10,10">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Text="{Binding Path=Price}" TextWrapping="NoWrap" Grid.ColumnSpan="1" Grid.Row="1" Grid.Column="1" FontSize="11" Foreground="#FF086C8E" FontWeight="Bold"/>
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Text="{Binding Path=Id}" Grid.ColumnSpan="1" Grid.Column="1" TextWrapping="NoWrap" FontSize="11" Foreground="#FF383838"/>
<TextBlock Text="Book Code:" TextWrapping="NoWrap" FontSize="11" Foreground="#FF383838"/>
<TextBlock Text="Price:" TextWrapping="NoWrap" Grid.Row="1" Margin="0,4,0,2" FontSize="11" Foreground="#FF383838"/>
</Grid>
</Grid>
</DataTemplate>
</Extended:C1Book.ItemTemplate>
|
- In Code view, add the following import statements to the top of the page:
| C# |
Copy Code
|
using C1.Xaml.Extended;
|
- Add the following code just after the page's constructor. This code will allow you to call data from a separate code file:
| C# |
Copy Code
|
InitDataSource();
}
private void InitDataSource()
{
// load book descriptions from xml
string peopleXMLPath = Path.Combine(Package.Current.InstalledLocation.Path, "Amazon.xml");
XDocument doc = XDocument.Load(peopleXMLPath);
//XDocument doc = XDocument.Load(@"..\..\..\Amazon.xml");
var books = from reader in doc.Descendants("book")
select new AmazonBookDescription
{
Title = reader.Attribute("title").Value,
CoverUri = reader.Attribute("coverUri").Value,
Id = reader.Attribute("id").Value,
Price = reader.Attribute("price").Value,
StockAmount = int.Parse(reader.Attribute("stockAmount").Value)
};
// set the book's item source
book.ItemsSource = books;
}
#region Object Model
public Orientation Orientation
{
get
{
return book.Orientation;
}
set
{
book.Orientation = value;
}
}
public bool IsFirstPageOnTheRight
{
get
{
return book.IsFirstPageOnTheRight;
}
set
{
book.IsFirstPageOnTheRight = value;
}
}
public PageFoldVisibility ShowPageFold
{
get
{
return book.ShowPageFold;
}
set
{
book.ShowPageFold = value;
}
}
public PageFoldAction PageFoldAction
{
get
{
return book.PageFoldAction;
}
set
{
book.PageFoldAction = value;
}
}
public double FoldSize
{
get
{
return book.FoldSize;
}
set
{
book.FoldSize = value;
}
}
public int CurrentPage
{
get
{
return book.CurrentPage;
}
set
{
book.CurrentPage = value;
}
}
#endregion
|
In this step you added templates to the C1Book control and added code to call the content from a separate file. In the next step you'll add files to the application.
See Also
