Кто-то на одном из семинаров спрашивал меня о том, как можно сделать скриншот интерфейса SilverLight приложения и сохранить его в виде изображения на диск. С этого примера и начнем.

Для начала создадим интерфейс приложения, состоящий из примитивной формы и панели для отображения нашего снимка:

<UserControl x:Class="SilverlightApplication56.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800" Height="600">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0">
            <TextBox Width="100"></TextBox>
            <TextBox Width="100"></TextBox>
            <Button Width="100" Content="Update" Click="Button_Click"></Button>
        </StackPanel>
        <StackPanel x:Name="stk1" Grid.Column="1" VerticalAlignment="Center">
        </StackPanel>
    </Grid>
</UserControl>

Чтобы пример был более эффектным, будем делать снимок не просто формы, а всего интерфейса, включая и панель со снимком. Чтобы реализовать такой код, нам понадобится класс WritableBitmap. Вот он то и представляет собой реализацию Pixel API в SilverLight 3. Этот класс содержится в пространстве имен System.Windows.Media.Imaging и позволяет создать Bitmap контекст заданного размера (длина, ширина изображения). Доступ к изображению может быть осуществлен попиксельно, используя простой индексатор.

В нашем примере мы используем метод Render, который позволяет преобразовать в изображение любой графический элемент, включая его дочерние элементы.

private void Button_Click(object sender, RoutedEventArgs e)
{
    WriteableBitmap bit = new WriteableBitmap(this.Width, this.Height, PixelFormats.Pbgra32);
    bit.Render(LayoutRoot, new MatrixTransform());
    Image img = new Image();
    img.Source = bit;
    stk1.Children.Clear();
    stk1.Children.Add(img);
}

Вот так будет выглядить наше приложение после многократного нажатия кнопки Update.

image