この手順では、設計時、XAML マークアップ、およびコードで C1Book コントロールにコンテンツを追加して、ページめくり可能な複数のページから成る仮想の本を作成します。プロジェクトをカスタマイズしてアプリケーションの C1Book コントロールにコンテンツを追加するには、次の手順に従います。
| マークアップ |
コードのコピー
|
|---|---|
<Border Grid.Row="1">
<Grid>
<Extended:C1Book x:Name="book" Height="450" Width="600">
</Extended:C1Book>
</Grid>
</Border>
|
|
<Extended: C1Book> </Extended: C1Book> タグ内で、次の XAML マークアップを追加します。これで、マークアップにいくつかのテンプレートが追加されます。
XAML でマークアップの書き方
| マークアップ |
コードのコピー
|
|---|---|
<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>
|
|
C# コードの書き方
| C# |
コードのコピー
|
|---|---|
using C1.Xaml.Extended; |
|
C# コードの書き方
| C# |
コードのコピー
|
|---|---|
InitDataSource();
}
private void InitDataSource()
{
// 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)
};
// 本の項目ソースを設定します
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
|
|
この手順では、C1Book コントロールにテンプレートを追加し、別のファイルからコンテンツを呼び出すコードを追加しました。次の手順では、アプリケーションにいくつかのファイルを追加します。