Advanced FlowDocument content

Daha önceden de yazdığım gibi, WPF ve FlowDocument öğelerinin metin görselleştirme yetenekleri oldukca zengindir, neredeyse her şeyi yapabilirsiniz yaygın kullanım örnekleri olarak: tablolar, listeler, görsel ekleme gibi pek çok şeyi sayabiliriz. Şu ana kadar FlowDocument içeriğiyle ilgili çok basit örnekler kullandık, ancak bu makalede nihayet daha kapsamlı bir örnek yapacağız.

Aşağıdaki örneğin XAML kodu gözüde zor gelebilir, fakat aslında oldukca basit ve HTML'ye benziyor. Metinleri kolayca düzenlemek için stilize edilmiş paragraflara yerleştirebilirsiniz. Şimdi XAML koduna ve hemen ardından sonucuna bir göz gezdirelim.

<Window x:Class="WpfTutorialSamples.Rich_text_controls.ExtendedFlowDocumentSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ExtendedFlowDocumentSample" Height="550" Width="500">
    <Grid>
        <FlowDocumentScrollViewer>
            <FlowDocument>
                <Paragraph>
                    <Image Source="http://www.wpf-tutorial.com/images/logo.png" Width="90" Height="90" Margin="0,0,30,0" />
                    <Run FontSize="120">WPF</Run>
                </Paragraph>

                <Paragraph>
                    WPF, which stands for
                    <Bold>Windows Presentation Foundation</Bold>,
                    is Microsoft's latest approach to a GUI framework, used with the .NET framework.
                    Some advantages include:
                </Paragraph>

                <List>
                    <ListItem>
                        <Paragraph>
                            It's newer and thereby more in tune with current standards
                        </Paragraph>
                    </ListItem>
                    <ListItem>
                        <Paragraph>
                            Microsoft is using it for a lot of new applications, e.g. Visual Studio
                        </Paragraph>
                    </ListItem>
                    <ListItem>
                        <Paragraph>
                            It's more flexible, so you can do more things without having to write or buy new controls
                        </Paragraph>
                    </ListItem>
                </List>

                <Table CellSpacing="0">
                    <TableRowGroup>
                        <TableRow Background="Gainsboro" FontWeight="Bold">
                            <TableCell></TableCell>
                            <TableCell>
                                <Paragraph TextAlignment="Right">WinForms</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph TextAlignment="Right">WPF</Paragraph>
                            </TableCell>
                        </TableRow>
                    </TableRowGroup>

                    <TableRowGroup>
                        <TableRow>
                            <TableCell Background="Gainsboro" FontWeight="Bold">
                                <Paragraph>Lines of code</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph TextAlignment="Right">1.718.000</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph TextAlignment="Right">1.542.000</Paragraph>
                            </TableCell>
                        </TableRow>
                    </TableRowGroup>
                    <TableRowGroup>
                        <TableRow>
                            <TableCell Background="Gainsboro" FontWeight="Bold">
                                <Paragraph>Developers</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph TextAlignment="Right">633.000</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph TextAlignment="Right">981.000</Paragraph>
                            </TableCell>
                        </TableRow>
                    </TableRowGroup>
                </Table>
                <Paragraph Foreground="Silver" FontStyle="Italic">A table of made up WinForms/WPF numbers</Paragraph>
            </FlowDocument>
        </FlowDocumentScrollViewer>
    </Grid>
</Window>

Etiketlerin (tags) detaylarına fazla değinmeyeceğim. Umarım var oldukları haliyle sizlere bir anlam ifade ediyorlardır.

Gördüğünüz gibi, liste, görsel ve tablo eklemek oldukça kolaydır, ancak aslında FlowDocument içine BlockUIContainer öğesini kullanarak, herhangi bir WPF kontrolünü de dahil edebilirsiniz. Normalde yalnızca bir pencere içinde kullanılabilen tüm kontrollere bu öğe aracılığıyla erişebilirsiniz. İşte bir örnek:

<Window x:Class="WpfTutorialSamples.Rich_text_controls.BlockUIContainerSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:self="clr-namespace:WpfTutorialSamples.Rich_text_controls"
        Title="BlockUIContainerSample" Height="275" Width="300">
    <Window.Resources>
        <x:Array x:Key="UserArray" Type="{x:Type self:User}">
            <self:User Name="John Doe" Age="42"/>
            <self:User Name="Jane Doe" Age="36"/>
        </x:Array>
    </Window.Resources>
    <Grid>
        <FlowDocumentScrollViewer>
            <FlowDocument>
                <Paragraph FontSize="36" Margin="0">Users</Paragraph>
                <Paragraph FontStyle="Italic" TextAlignment="Left" FontSize="14" Foreground="Gray">Here's a list of our users, inside our FlowDocument, in a completely interactive ListView control!</Paragraph>
                <BlockUIContainer>
                    <ListView BorderThickness="0" ItemsSource="{StaticResource UserArray}">
                        <ListView.View>
                            <GridView>
                                <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" Width="150" />
                                <GridViewColumn Header="Age" DisplayMemberBinding="{Binding Age}" Width="75" />
                            </GridView>
                        </ListView.View>
                    </ListView>
                </BlockUIContainer>
                <Paragraph FontStyle="Italic" TextAlignment="Left" FontSize="14" Foreground="Gray">More content can go here...</Paragraph>
            </FlowDocument>
        </FlowDocumentScrollViewer>
    </Grid>
</Window>

Şimdi içinde ListView bulunan bir FlowDocument oluşturduk ve ekran görüntüsünden de görebileceğiniz gibi, ListView normalde olduğu gibi çalışıyor. Oldukça havalı!

Özet

Bu makaledeki iki örnekte açıklanan teknikleri kullanarak, FlowDocument belgeleri oluştururken neredeyse her şeyi yapmak mümkündür. Pahalı raporlama paketlerinde gördüğümüz gibi, son kullanıcıya görsel bilgileri sunmak için mükemmel bir çözümdür.