Erstellen einer benutzerfreundlichen Druckumgebung in Windows 8

Entwicklerblog für Windows 8-Apps

Ein Einblick in die Entwicklung von Apps im Metro-Stil – präsentiert vom Windows 8-Entwicklerteam

Erstellen einer benutzerfreundlichen Druckumgebung in Windows 8

  • Comments 0

Bei unseren Überlegungen zur Erneuerung von Windows nutzten wir die Gelegenheit, auch alle unterschiedlichen Aspekte der Druckfunktionalität zu überdenken – die Benutzerumgebung, die Entwicklerplattform, das große Spektrum an Geräten – und wie diese miteinander kombiniert werden, um eine großartige Gesamterfahrung bieten zu können. In diesem Beitrag möchte ich einen Überblick über die Benutzerumgebung und die Entwicklerplattform zum Drucken in Windows 8 geben. Ich beschreibe ebenfalls, wie Sie die Benutzerumgebung in einer Weise anpassen können, dass sie den Anforderungen Ihrer App entspricht.

Drucken aus Windows 8-Apps

Zunächst betrachten wir die Druckfunktionen in Windows 8 und wenden uns dann den Möglichkeiten beim Drucken zu und wie unterschiedliche Arten von Apps diese Funktionen behandeln.

Drucken in Windows 8 steht immer im Zusammenhang mit der Druckunterstützung einer App. Eine App unterstützt Druckfunktionen, indem sie sich für den Vertrag für „Drucken“ registriert. Sie entscheiden, ob und wann Ihre App Drucken unterstützt oder nicht. Nicht jede App muss etwas drucken. Wenn Sie beispielsweise ein Spiel entwickeln, werden Sie sich wahrscheinlich dazu entschließen, dass keine Druckvorgänge erforderlich sind. Wenn Sie jedoch an einer App für eine Fluglinie arbeiten, ist die Anforderung zum Drucken von Bordkarten wahrscheinlich ein wichtiger Bestandteil des Eincheckvorgangs. Da Sie es entscheiden, ob und wann ein Druckvorgang in Ihrer App möglich ist, müssen Sie die Erwartungen Ihrer Kunden berücksichtigen. Wenn Ihr Kunde erwartet, dass Ihre App drucken kann, empfiehlt es sich, Druckunterstützung in Ihre App zu integrieren.

Zum Drucken in Windows 8 streifen Sie mit dem Finger vom rechten Bildschirmrand, um die Charms anzuzeigen. Wenn eine App Drucken unterstützt, werden alle auf dem Computer installierten Drucker angezeigt, wenn Sie auf den Charm „Geräte“ tippen. Nachdem Sie den Drucker ausgewählt haben, auf dem Sie drucken möchten, wird das Fenster für den Druck angezeigt, wie im Folgenden dargestellt.

Der Druckvorgang

Der Druckvorgang

Im Druckfenster werden eine Vorschau des Ausdrucks und einige häufig verwendete Druckereinstellungen angezeigt. Beim Planen der Druckfunktionen haben wir oft gehört, dass Benutzer den Ausdruck vor dem eigentlichen Drucken sehen möchten. Die Druckplattform unterstützt die Anzeige einer Vorschau des Inhalts im Druckfenster, statt einer eigenen benutzerdefinierten Vorschau in einer App. Die Druckplattform ermöglicht gleichzeitig das Aktualisieren der Vorschau, damit der Benutzer die Druckausgabe überprüfen kann, wenn er verschiedene Druckereinstellungen im Druckfenster ändert.

Zum Vereinfachen der Druckfunktionen werden in der Standardeinstellung im Druckfenster lediglich 3 Druckereinstellungen angezeigt: Kopien, Ausrichtung und Farbe. Unsere Untersuchungen haben ergeben, dass diese Einstellungen üblicherweise von den meisten Benutzern beim Drucken geändert werden. Diese häufig geänderten Einstellungen werden angezeigt, damit ein Benutzer beim Vorbereiten eines Druckauftrags schnell darauf zugreifen kann. Als App-Entwickler können Sie steuern, welche Einstellungen im Druckfenster angezeigt werden, um die für Ihre App am besten geeignete Umgebung bereitzustellen. Sie können auch die Standardeinstellungen festlegen.

Alle Windows 8-Apps bieten die gleiche Benutzerumgebung beim Drucken der Inhalte. Wenn also ein Benutzer einmal weiß, wie er in einer App drucken kann, kann er oder sie ab sofort in jeder App drucken. Es ist nicht mehr nötig, irgendwo nach einer Druckfunktion zu suchen und auch nicht in jeder App eine neue Methode zu lernen.

Der Vertrag für „Drucken“

Ihre App verwendet den Vertrag für „Drucken“ zum Kommunizieren mit der Druckplattform. Ihre App stellt den zu druckenden Inhalt und Windows die Druckumgebung sowie die zugrunde liegende Infrastruktur bereit. Wenn Ihre App für den Vertrag für „Drucken“ registriert ist, steht Drucken über den Charm „Geräte“ zur Verfügung und ist somit einfach im Zugriff und in der Verwendung.

Der Vertrag für „Drucken“ wurde wie alle WinRT-APIs entwickelt, um mit der Sprache und dem Framework für die Benutzeroberfläche Ihrer Wahl zusammenzuarbeiten. So erhalten Sie eine einheitliche Druckumgebung, ungeachtet dessen, ob Sie HTML oder XAML zum Gestalten Ihres Inhalts verwenden. Wenn Sie jedoch mehr Kontrolle über die Druckfunktionen in Ihrer App haben möchten, können Sie auch D2D- oder XPS-Technologien verwenden.

Beim Hinzufügen einer Druckunterstützung in Ihrer App sollten Sie zwei wesentliche Elemente berücksichtigen:

  • Die Bereitstellung des Inhalts für den Druck
  • Die Festlegung der für Ihre App geeigneten Druckeinstellungen

Sehen wir uns die Elemente einzeln an.

Die Bereitstellung des Inhalts für den Druck

Nehmen Sie sich beim Entwerfen Ihrer App etwas Zeit, um die Druckszenarien zu durchdenken. Welche Inhalte möchten Benutzer wohl mobil verwenden? Welche Inhalte möchten sie in gedruckter Form zur späteren Verwendung oder zum Ansehen mitnehmen? Falls Ihre App beispielsweise Fotos aufnimmt, möchte der Benutzer diese möglicherweise drucken und gerahmt in der Wohnung aufhängen? Die Überlegungen zu den Szenarien für Ihre App helfen Ihnen beim Auswählen der Inhalte, die gedruckt werden müssen, und beim Erreichen der bestmöglichen Druckerfahrung für Ihre Kunden.

Nachdem Sie festgestellt haben, welche Inhalte gedruckt werden, sollten Sie überlegen, woher Ihre App die Druckinhalte bezieht. Als erstes werden Sie feststellen, dass Dinge, die gut auf dem Bildschirm aussehen, nicht unbedingt genau so gut auf Papier aussehen. Sie sollten sich die optimale Art überlegen, den Inhalt für alle Ausgaben zu formatieren. Dies bedeutet, dass Sie wahrscheinlich aus der Hauptansicht Ihrer App etwas anderes drucken werden, als auf dem Bildschirm angezeigt wird. Dies gilt für alle Arten von Apps, auch einfache Anwendungen wie beispielsweise Nachrichten-Apps. Inhalte, die auf dem Bildschirm ansprechend in Spalten dargestellt werden, können unter Umständen nicht ebenso ansprechend auf Papier ausgegeben werden. Diese Überlegungen haben Auswirkungen auf das Erstellen Ihrer App, daher ist es einfacher, sie früh in der Entwurfsphase zu behandeln, als später darauf zurück zu kommen und Änderungen durchzuführen.

Möglicherweise sollten Sie auch überlegen, wie das Drucken gut in den Workflow Ihrer App passt. In vielen Apps ist Drucken lediglich ein Eintrag im Menü. Ein Benutzer möchte z. B. das Foto, das er gerade betrachtet, ausdrucken. In diesem Fall ist der Charm „Geräte“ der richtige Ort, an den Benutzer zum Starten des Drucks geführt werden sollten. Mit anderen Worten gesagt, ist das Hinzufügen einer eigenen internen Methode in der App nicht der optimale Weg; verwenden Sie den Charm zum Ausdrucken. Auf der anderen Seite kann es Fälle geben, in denen Ausdrucke wesentlicher Bestandteil des allgemeinen App-Workflows sind. Stellen Sie sich zum Beispiel eine Shopping-App vor, die Quittungen ausdruckt. In der Bildschirmansicht wird möglicherweise eine Bestellung bestätigt oder einem Kunden für den Auftrag gedankt, aber auch eine Schaltfläche Quittung drucken angezeigt, die Benutzer direkt zur Druckumgebung führt. Tippt der Benutzer auf die Schaltfläche Quittung drucken, wird das Druckfenster geöffnet und die Vorschau der Quittung angezeigt. Er oder sie hat dann die Möglichkeit, einen Ausdruck direkt auf Basis dieser Vorschau auszuführen, wie im Folgenden dargestellt:

Ausdrucken von Inhalten, die sich von der Bildschirmansicht unterscheiden

Ausdrucken von Inhalten, die sich von der Bildschirmansicht unterscheiden

Drucken aus HTML/JavaScript-Apps

Um Druckunterstützung in Ihre App zu implementieren, müssen Sie lediglich die folgenden Codezeilen hinzufügen.

// Register for print contract
var printManager = Windows.Graphics.Printing.PrintManager.getForCurrentView();
printManager.onprinttaskrequested = onPrintTaskRequested;
function onPrintTaskRequested(printEvent) {
printEvent.request.createPrintTask("Print Sample", function (args) {
args.setSource(MSApp.getHtmlPrintDocumentSource(document));
});
}

Diese Codezeilen registrieren Ihre App für den Vertrag für „Drucken“. Wenn der Benutzer einen Druckauftrag auswählt, wird lediglich der Inhalt des aktuellen Dokuments von der App gedruckt, der dem sichtbaren Bildschirminhalt entspricht. Sie können nun für den Druck aus Ihrer App den Charm „Geräte“ verwenden. Ihre App erhält eine Druckumgebung mit Standarddruckereinstellungen. Das Renderingmodul von Windows 8 übernimmt die Paginierung und Vorschau.

In anderen Szenarien möchten Sie den Inhalt und die Gestaltung des Ausdrucks steuern. So sollen beispielsweise Inhalte ausgedruckt werden, die bisher nicht auf dem Bildschirm sichtbar sind, also einen anderen als den aktuellen DOM-Inhalt (wie beim Druck der zuvor erwähnten Quittung). Der einfachste Weg zu diesem Ziel besteht im Definieren des alternativen Inhalts als Teil des „head“-Elements in HTML, wie in folgendem Beispiel dargestellt.

<! -- Add this to the head element of your html file -->
<link rel="alternate" href="http://go.microsoft.com/fwlink/?linkid=240076" media="print"/>

Wenn Sie so vorgehen, wird der Aufruf von getHtmlPrintDocumentSource(document) wie gewünscht den angegebenen alternativen Inhalt verwenden.

Sie möchten jetzt aber wirklich kreativ sein? Das Tolle daran ist, dass Sie HTML, so lange Sie ein HTML-Dokument an getHtmlPrintDocumentSource übergeben, von überall drucken können: lokal erstellt, aus dem Internet in einen IFrame geladen oder auf jede andere Art, in der Sie ein gedrucktes Dokument erstellen möchten.

Sie können auch komplexere Layoutsteuerelemente verwenden, z. B. mehrspaltiges Layout, horizontales Scrollen oder Elementgruppierung, um die Bildschirmumgebung Ihrer App zu entwickeln. Solche Layouts können nicht einfach in ein gutes Drucklayout überführt werden. Es ist sehr wichtig, das Layout vor dem Übertragen an die Druckplattform zu vereinfachen, damit Inhalte leicht mit Paginierung versehen und für eine Vorschau umgesetzt werden können. Dies lässt sich durch die Verwendung von CSS-Medienregeln realisieren. Das Definieren von speziellen CSS-Regeln für Druckmedien ist hilfreich beim Erstellen eines Layouts, das sich von der aktuellen Bildschirmanzeige Ihrer App unterscheidet. Mit CSS können Sie Inhalte verstecken, Elemente in der Größe ändern, Ränder festlegen, Elemente wie Hintergründe und Bildlaufleisten entfernen, Schriften und Farben ändern und vieles mehr. Sehen wir uns ein Beispiel an:

Stellen Sie sich eine Rezepte-App vor, in der Sie die Rezepte für Ihre Lieblingsspeisen ausdrucken können. Diese App basiert auf der Raster-App-Vorlage (Datei->Neues Projekt-><Sprache>->Windows Store->Raster-App).

Rezepte-App

Die Rezepte-App

Zunächst müssen Sie überlegen, was gedruckt werden muss. Nehmen wir an, der Benutzer möchte seinen Rezeptausdruck zu einem Rezeptbuch hinzufügen, dann werden ihn zu diesem Zweck Bewertungen oder Kritiken nicht interessieren. Gedruckt werden sollten also Titel, Abbildung, Beschreibung, Zutatenliste und Anleitung. Die anderen Inhalte der Seite werden nicht gedruckt, beispielsweise Bewertungen, Kritiken usw.

Im Folgenden ist die CSS-Datei aufgeführt, die für die Anzeige auf dem Bildschirm zuständig ist.

.itemdetailpage .content {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
display: block;
height: 100%;
overflow-x: auto;
position: relative;
width: 100%;
z-index: 0;}

.itemdetailpage .content article {
/* Define a multi-column, horizontally scrolling article by default. */
column-fill: auto;
column-gap: 80px;
column-width: 480px;
height: calc(100% - 183px);
margin-left: 120px;
margin-top: 133px;
width: 480px;}

.itemdetailpage .content article header .item-title {
margin-bottom: 19px;}

.itemdetailpage .content article .item-image {
height: 240px;
width: 460px;}

.itemdetailpage .content article .item-rating {
height: 40px;
margin-top: 0px}

.itemdetailpage .content article .item-review {
height: 100px;
margin-top: 20px }

.itemdetailpage .content article .item-content p {
margin-top: 10px;
margin-bottom: 20px;
margin-right: 20px;}

Dies ist die Ansicht in der Druckvorschau.

Drucken ohne Inhaltsformatierung

Drucken ohne Inhaltsformatierung

Diese Druckvorschau enthält eine Reihe von Problemen. Die Schaltfläche „Zurück“ befindet sich neben dem Titel, außerdem ist eine Bildlaufleiste zu sehen. Weiterhin wird nur eine Vorschau der ersten Seite dargestellt. Diese Probleme führen zu einer fehlerhaften Vorschau.

Wenn der Inhalt in der App nicht vollständig auf dem Bildschirm angezeigt werden kann, führt die „overflow“-Eigenschaft zum Anzeigen einer Bildlaufleiste, damit der Benutzer zum nicht sichtbaren Inhalt navigieren kann. Beim Senden des Inhalts an den Drucker wird das gleiche Verhalten angewendet, dies führt zur abgeschnittenen Darstellung. Um eine ordnungsgemäße Darstellung beim Drucken zu erzielen, muss der Inhalt durch die CSS-Regeln formatiert werden.

Für das Drucklayout erstellen Sie eine CSS-Datei (print.css) und fügen diese der HTML-Datei hinzu.

<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
Print.css
/* Hide the back button */
.win-backbutton {
display: none;}

/* Remove the grid layout */
.fragment {
display: block;
height: auto;
width: 100%;
position: relative;
margin: 0px;
overflow: visible;}

/* Remove the header */
.fragment header[role=banner] {
display: none;}

/* Remove multicolumn layout */
/* Resize the content to take up available space*/
/* Remove scrolling behavior */
.itemdetailpage .content {
display: block;
height: 100%;
overflow: visible;
width: 100%;}

.itemdetailpage .content article {
height: 100%;
width: 100%;
margin: 0px;
overflow: visible;}

/* Adjust margins */
/* Increase font sizes */
.itemdetailpage .content article header .item-title {
margin-bottom: 29px;
font-size: 450%;}

.itemdetailpage .content article .item-image {
height: 480px;
width: 920px;
margin-top: 20px;
margin-bottom: 40px;}

/* Remove rating and review controls */
.itemdetailpage .content article .item-rating {
display: none;}
.itemdetailpage .content article .item-review {
display: none; }

.itemdetailpage .content article .item-content p {
height: auto;
width: 100%;}

Dies führt zu einer geordneten Druckvorschau und einem Ausdruck, wie hier dargestellt.

Drucken mit Inhaltsformatierung

Drucken mit Inhaltsformatierung

Sie können feststellen, dass die Probleme aus dem vorherigen Beispiel nicht mehr auftreten. Die Schaltfläche „Zurück“ ist nicht mehr neben dem Titel zu sehen, auch die Bildlaufleiste wird nicht mehr in der Vorschau angezeigt. Das Wechseln zur nächsten Seite in der Druckvorschau zeigt, dass die Druckinhalte die Seite gut füllen. Mit CSS als leistungsstarkem Werkzeug können Sie die Druckausgabe so gestalten, wie Sie es möchten.

Weitere Informationen zum Drucken aus einer App, die in HTML und JavaScript geschrieben wurde, finden Sie in Drucken (Apps im Metro-Stil mit JavaScript und HTML).

Drucken aus XAML-Apps

Wenn Sie Ihre App in XAML schreiben, müssen Sie einen größeren Teil der Druckfunktionen in der App selbst bereitstellen. Sie müssen das Layout des druckbaren Inhalts für Ihre App definieren und festlegen, wie die Paginierung funktionieren soll. Auf diese Weise können Sie den Inhalt jeder Seite kontrollieren und exakt bestimmen, welche Inhalte von Ihrer App gedruckt werden sollen. Wie erwartet, verwenden Sie XAML zum Definieren des Layouts des von Ihrer App gedruckten Inhalts, genau wie Sie XAML verwenden, um das Layout des Bildschirminhalts zu bestimmen.

XAML ist eine großartige beschreibende Sprache, die Ihnen flexible Möglichkeiten zum Darstellen von Inhalten auf dem Bildschirm bietet, insbesondere wenn es für Ihre App erforderlich ist, Inhalte für verschiedene Bildschirmauflösungen zu skalieren. Die gleichen Eigenschaften, die XAML ideal zur Bildschirmgestaltung machen, führen nicht unbedingt zu einer guten Darstellung auf Papier. Mit XAML werden beispielsweise oft Schriftarten und Bilder skaliert, damit Sie den verfügbaren horizontalen und vertikalen Pixeln auf dem Bildschirm entsprechen. Dies funktioniert großartig auf dem Bildschirm, die Benutzer möchten aber Inhalte im Ausdruck eher nicht skaliert haben. Sie werden sich also Gedanken darüber machen müssen, wie die Inhalte aus Ihrer App auf Papier dargestellt werden sollen, und dann sicherstellen, dass das von Ihnen verwendete XAML Ihren Absichten exakt entspricht.

Kehren wir zurück zur Rezepte-App und schauen uns an, wie Sie mit XAML die Gestaltung des Inhalts durchführen. In XAML befindet sich der für uns interessante Inhalt in ItemDetailPage innerhalb des richTextColumns-Steuerelements. Um die für den Druck interessanten Informationen zu erhalten (Titel, Bild, Beschreibung, Zutatenliste und Anleitung), definieren Sie eine Rezeptseite in Form einer Liste von verknüpften Containern.

<Grid VerticalAlignment="Center" x:Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="7*"/>
</Grid.RowDefinitions>

<RichTextBlock x:Name="txtContent" OverflowContentTarget="{Binding ElementName=link}" Grid.Row="0" Grid.Column="0">
<Paragraph TextAlignment="Center">
<Run x:Name="txtRecipe" Text="{Binding Title}" FontSize="30" Foreground="Black"></Run>
</Paragraph>
<Paragraph>
<InlineUIContainer>
<Image x:Name="imgRecipe" Stretch="Uniform" Source="{Binding Image}"/>
</InlineUIContainer>
</Paragraph>
<Paragraph>
<Run Text="Ingredients:" FontSize="30" Foreground="Black"/>
<Run x:Name="txtIngredients" Text="{Binding RecipeIngredients}" FontSize="20" Foreground="Black"/>
</Paragraph>
<Paragraph>
<Run Text="Details:" FontSize="30" Foreground="Black"/>
<Run x:Name="txtDetails" Text="{Binding Content}" FontSize="20" Foreground="Black"/>
</Paragraph>
</RichTextBlock>

<RichTextBlockOverflow x:Name="link" Grid.Row="1" Grid.Column="0"/>
</Grid>

Für die Fälle, in denen das vollständige Rezept nicht auf eine Druckseite passt, muss die App Folgeseiten für die weiteren Inhalte erstellen. In unserem Beispiel enthält die Folgeseite lediglich ein RichTextBlockOverflow-Element, das mit dem Rich Text-Blockelement der vorherigen Seite verknüpft wird, um den verbleibenden Text auf der neuen Seite darzustellen.

<Grid x:Name="grid">
<RichTextBlockOverflow x:Name="link"/>
</Grid>

Als Lösung für die Paginierung können Sie einen Seitenprojektionsalgorithmus wie den folgenden definieren:

void printDocument_Paginate(object sender, PaginateEventArgs e)
{
PrintDocument printDocument = (PrintDocument)sender;

// get printer page description
PrintPageDescription pageDesc = e.PrintTaskOptions.GetPageDescription(0);

// clear previous generated print content
pages.Clear();
printingRoot.Children.Clear();

RecipePage page = new RecipePage(pageDesc)
{
DataContext = flipView.SelectedItem
};

UIElement element = null;
RichTextBlockOverflow rtbo = page.Link;

do
{
// check if this is the first page
if (element != null)
{
var continuation = new ContinuationPage(rtbo, pageDesc);
element = continuation;
rtbo = continuation.Link;
}
else
{
element = page;
}

// add the page to the visual tree to forece content flow
printingRoot.Children.Add(element);
printingRoot.InvalidateMeasure();
printingRoot.UpdateLayout();

pages.Add(element);

} while (rtbo.HasOverflowContent);

// set the current number of pages
printDocument.SetPreviewPageCount(pages.Count, PreviewPageCountType.Intermediate);
}

Weitere Informationen zum Drucken aus einer App, die in XAML geschrieben wurde, finden Sie in Drucken (Apps im Metro-Stil mit C#/VB/C++ und XAML).

Festlegen der für Ihre App geeigneten Druckeinstellungen

Wenn Sie wissen, welche Inhalte aus Ihrer App gedruckt werden müssen und wie diese dargestellt werden sollen, sollten Sie etwas Zeit in die Überlegungen zur Benutzerumgebung investieren, die Sie in Ihrer App bereitstellen möchten.

Möglicherweise stellen Sie fest, dass die Standardumgebung mit drei Druckereinstellungen nicht ausreichend ist. Es müssen möglicherweise zusätzliche Druckereinstellungen angezeigt oder dem Druckfenster eigene spezifische Einstellungen für die App hinzugefügt werden. Wenn dies der Fall ist, können Sie die Druckumgebung so anpassen, dass sie Ihren Anforderungen entspricht.

Sehen wir uns ein paar Beispiele an:

Hinzufügen von Druckereinstellungen

Für den Beispielfall der Rezepte-App wissen wir, dass Rezepte sehr oft über mehrere Seiten reichen können. Daher sollten Sie möglicherweise eine Option zum beidseitigen Drucken zur Verfügung stellen. Dies erzielen Sie, indem Sie dem Druckfenster die Einstellung für Duplexdruck hinzufügen.

Das Druckfenster sieht jetzt folgendermaßen aus:

Drucken mit zusätzlichen Druckereinstellungen

Drucken mit zusätzlichen Druckereinstellungen

So fügen Sie die Einstellung für Duplexdruck in JavaScript hinzu

printTask.options.displayedOptions.append
(Windows.Graphics.Printing.StandardPrintTaskOptions.duplex);

So fügen Sie die Einstellung für Duplexdruck in C# hinzu

printTask.options.displayedOptions.Add (Windows.Graphics.Printing.StandardPrintTaskOptions.Duplex);

Der Duplexdruck ist nur eine von vielen Druckereinstellungen, die Sie auswählen können. Auch wenn Sie den Duplexdruck angefordert haben, wird die Option jedoch möglicherweise nicht angezeigt. Wenn der Drucker keinen beidseitigen Druck unterstützt, wird Windows diese Einstellung vor dem Benutzer verbergen. Weitere Informationen zum Hinzufügen von Druckereinstellungen finden Sie in So wird's gemacht: Ändern von Standardoptionen in der Druckvorschau-UI für HTML/JavaScript und XAML.

Hinzufügen benutzerdefinierter Einstellungen in XAML-Apps

In XAML-Apps können Sie weitere Anpassungen vornehmen. Dem Druckfenster können Sie in XAML-Apps eigene, benutzerdefinierte Einstellungen hinzufügen. Sehen wir uns ein Beispiel an:

Stellen Sie sich eine Karten-App vor, in der Sie Wegbeschreibungen ausdrucken können. Sie denken vielleicht: „Drucken von Karten kann kostspielig werden, da Tinte sehr teuer ist. Wie kann ich den Benutzer entscheiden lassen, was er drucken möchte?“. Sie können eine benutzerdefinierte Einstellung anzeigen, wie zum Beispiel eine Einstellung für die Wegbeschreibungsart:

Drucken mit benutzerdefinierten Druckereinstellungen

Drucken mit benutzerdefinierten Druckereinstellungen

In diesem Beispiel wurde in der App die Einstellung der Wegbeschreibungsart mit drei Optionen hinzugefügt: Karte und Text, nur Karte, nur Text. Auf diese Weise kann der Benutzer entscheiden, wie er die Karte ausdrucken möchte.

So fügen Sie eine solche benutzerdefinierte Option hinzu

PrintCustomItemListOptionDetails pageFormat = printDetailedOptions.CreateItemListOption 
("PageContent", "Pictures");
pageFormat.AddItem ("MapText", "Map and text");
pageFormat.AddItem ("MapOnly", "Map only");
pageFormat.AddItem ("TextOnly", "Text only");

// Add the custom option to the option list
displayedOptions.Add ("PageContent");

printDetailedOptions.OptionChanged += printDetailedOptions_OptionChanged;

Weitere Informationen zu diesem Feature finden Sie unter So wird's gemacht: Hinzufügen von benutzerdefinierten Einstellungen zur Druckvorschau-Benutzeroberfläche.

Fazit

Der Vertrag für „Drucken“ gibt Ihnen Flexibilität in der Entscheidung, was aus Ihrer App mit welchem Aussehen gedruckt wird, gleichzeitig wird Ihren Benutzern die gleiche Druckumgebung wie in allen anderen Windows 8-Apps geboten. Sie können mit der Standardumgebung drucken oder diese in der für Ihre App erforderlichen Weise anpassen, und Sie haben jederzeit die Flexibilität, die von Ihrer App gedruckten Informationen zu kontrollieren.

Referenzen

Link

Typen

Beispiel zum Vertrag für „Drucken“

Beispiel

Drucken (Apps im Metro-Stil mit JavaScript und HTML)

Dokumentation

Drucken (Apps im Metro-Stil mit C#/VB/C++ und XAML)

Dokumentation

Windows.Graphics.Printing-Namespace

Dokumentation

Windows.Graphics.Printing.OptionDetails-Namespace

Dokumentation

Sangeeta Ranjit  Senior Program Manager, Windows Devices and Networking

Unter Mitarbeit von: Darren Davis, Daniel Alex Volcinschi, Saumya Jain, Travis Eby

  • Loading...
Leave a Comment
  • Please add 2 and 7 and type the answer here:
  • Post