Image-Klasse
TOC
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern

Bild Class

Stellt ein Steuerelement dar, das ein Bild anzeigt. Die Bildquelle wird durch einen Verweis auf eine Bilddatei angegeben. Dabei werden mehrere Formate unterstützt. Für die Bildquelle kann auch ein Stream festgelegt werden. Eine Liste der unterstützten Formate für Bildquellen finden Sie unter "Hinweise".

Vererbung

Object
  DependencyObject
    UIElement
      FrameworkElement
        Image

Syntax


public sealed class Image : FrameworkElement

Attribute

[MarshalingBehavior(Agile)]
[Threading(Both)]
[Version(0x06020000)]
[WebHostHidden()]

Member

ImageKlasse hat diese Membertypen:

Konstruktoren

ImageKlasse hat diese Konstruktoren.

KonstruktorBeschreibung
Image Initializes a new instance of the Image class.

 

Ereignisse

ImageKlasse hat diese Ereignisse.

EreignisBeschreibung
DataContextChanged Occurs when the value of the FrameworkElement.DataContext property changes. (Geerbt von FrameworkElement)
DoubleTapped Occurs when an otherwise unhandled DoubleTap interaction occurs over the hit test area of this element. (Geerbt von UIElement)
DragEnter Occurs when the input system reports an underlying drag event with this element as the target. (Geerbt von UIElement)
DragLeave Occurs when the input system reports an underlying drag event with this element as the origin. (Geerbt von UIElement)
DragOver Occurs when the input system reports an underlying drag event with this element as the potential drop target. (Geerbt von UIElement)
Drop Occurs when the input system reports an underlying drop event with this element as the drop target. (Geerbt von UIElement)
GotFocus Occurs when a UIElement receives focus. (Geerbt von UIElement)
Holding Occurs when an otherwise unhandled Hold interaction occurs over the hit test area of this element. (Geerbt von UIElement)
ImageFailed Occurs when there is an error associated with image retrieval or format.
ImageOpened Occurs when the image source is downloaded and decoded with no failure. You can use this event to determine the natural size of the image source.
KeyDown Occurs when a keyboard key is pressed while the UIElement has focus. (Geerbt von UIElement)
KeyUp Occurs when a keyboard key is released while the UIElement has focus. (Geerbt von UIElement)
LayoutUpdated Occurs when the layout of the visual tree changes, due to layout-relevant properties changing value or some other action that refreshes the layout. (Geerbt von FrameworkElement)
Loaded Occurs when a FrameworkElement has been constructed and added to the object tree, and is ready for interaction. (Geerbt von FrameworkElement)
LostFocus Occurs when a UIElement loses focus. (Geerbt von UIElement)
ManipulationCompleted Occurs when a manipulation on the UIElement is complete. (Geerbt von UIElement)
ManipulationDelta Occurs when the input device changes position during a manipulation. (Geerbt von UIElement)
ManipulationInertiaStarting Occurs when the input device loses contact with the UIElement object during a manipulation and inertia begins. (Geerbt von UIElement)
ManipulationStarted Occurs when an input device begins a manipulation on the UIElement. (Geerbt von UIElement)
ManipulationStarting Occurs when the manipulation processor is first created. (Geerbt von UIElement)
PointerCanceled Occurs when a pointer that made contact abnormally loses contact. (Geerbt von UIElement)
PointerCaptureLost Occurs when pointer capture previously held by this element moves to another element or elsewhere. (Geerbt von UIElement)
PointerEntered Occurs when a pointer enters the hit test area of this element. (Geerbt von UIElement)
PointerExited Occurs when a pointer leaves the hit test area of this element. (Geerbt von UIElement)
PointerMoved Occurs when a pointer moves while the pointer remains within the hit test area of this element. (Geerbt von UIElement)
PointerPressed Occurs when the pointer device initiates a Press action within this element. (Geerbt von UIElement)
PointerReleased Occurs when the pointer device that previously initiated a Press action is released, while within this element. (Geerbt von UIElement)
PointerWheelChanged Occurs when the delta value of a pointer wheel changes. (Geerbt von UIElement)
RightTapped Occurs when a right-tap input stimulus happens while the pointer is over the element. (Geerbt von UIElement)
SizeChanged Occurs when either the ActualHeight or the ActualWidth property changes value on a FrameworkElement. (Geerbt von FrameworkElement)
Tapped Occurs when an otherwise unhandled Tap interaction occurs over the hit test area of this element. (Geerbt von UIElement)
Unloaded Occurs when this object is no longer connected to the main object tree. (Geerbt von FrameworkElement)

 

Methoden

The Image Klasse hat diese Methoden. Es erbt auch Methoden von Object Klasse.

MethodeBeschreibung
AddHandler Adds a routed event handler for a specified routed event, adding the handler to the handler collection on the current element. Specify handledEventsToo as true to have the provided handler be invoked even if the event is handled elsewhere. (Geerbt von UIElement)
Arrange Positions child objects and determines a size for a UIElement. Parent objects that implement custom layout for their child elements should call this method from their layout override implementations to form a recursive layout update. (Geerbt von UIElement)
ArrangeOverride Provides the behavior for the Arrange pass of layout. Classes can override this method to define their own Arrange pass behavior. (Geerbt von FrameworkElement)
CancelDirectManipulations Cancels ongoing direct manipulation processing (system-defined panning/zooming) on any ScrollViewer parent that contains the current UIElement. (Geerbt von UIElement)
CapturePointer Sets pointer capture to a UIElement. Once captured, only the element that has capture will fire pointer-related events. (Geerbt von UIElement)
ClearValue Clears the local value of a dependency property. (Geerbt von DependencyObject)
FindName Retrieves an object that has the specified identifier name. (Geerbt von FrameworkElement)
FindSubElementsForTouchTargeting Enables a UIElement subclass to expose child elements that assist with resolving touch targeting. (Geerbt von UIElement)
GetAnimationBaseValue Returns any base value established for a dependency property, which would apply in cases where an animation is not active. (Geerbt von DependencyObject)
GetBindingExpression Returns the BindingExpression that represents the binding on the specified property. (Geerbt von FrameworkElement)
GetValue Returns the current effective value of a dependency property from a DependencyObject. (Geerbt von DependencyObject)
GoToElementStateCore When implemented in a derived class, enables per-state construction of a visual tree for a control template in code, rather than by loading XAML for all states at control startup. (Geerbt von FrameworkElement)
InvalidateArrange Invalidates the arrange state (layout) for a UIElement. After the invalidation, the UIElement will have its layout updated, which will occur asynchronously. (Geerbt von UIElement)
InvalidateMeasure Invalidates the measurement state (layout) for a UIElement. (Geerbt von UIElement)
Measure Updates the DesiredSize of a UIElement. Typically, objects that implement custom layout for their layout children call this method from their own MeasureOverride implementations to form a recursive layout update. (Geerbt von UIElement)
MeasureOverride Provides the behavior for the Measure pass of the layout cycle. Classes can override this method to define their own Measure pass behavior. (Geerbt von FrameworkElement)
OnApplyTemplate Invoked whenever application code or internal processes (such as a rebuilding layout pass) call ApplyTemplate. In simplest terms, this means the method is called just before a UI element displays in your app. Override this method to influence the default post-template logic of a class. (Geerbt von FrameworkElement)
OnCreateAutomationPeer When implemented in a derived class, returns class-specific AutomationPeer implementations for the Microsoft UI Automation infrastructure. (Geerbt von UIElement)
OnDisconnectVisualChildren Override this method to implement how layout and logic should behave when items are removed from a class-specific content or children property. (Geerbt von UIElement)
ReadLocalValue Returns the local value of a dependency property, if a local value is set. (Geerbt von DependencyObject)
ReleasePointerCapture Releases pointer captures for capture of one specific pointer by this UIElement. (Geerbt von UIElement)
ReleasePointerCaptures Releases all pointer captures held by this element. (Geerbt von UIElement)
RemoveHandler Removes the specified routed event handler from this UIElement. Typically the handler in question was added by AddHandler. (Geerbt von UIElement)
SetBinding Attaches a binding to a FrameworkElement, using the provided binding object. (Geerbt von FrameworkElement)
SetValue Sets the local value of a dependency property on a DependencyObject. (Geerbt von DependencyObject)
TransformToVisual Returns a transform object that can be used to transform coordinates from the UIElement to the specified object. (Geerbt von UIElement)
UpdateLayout Ensures that all positions of child objects of a UIElement are properly updated for layout. (Geerbt von UIElement)

 

Eigenschaften

Der ImageKlasse hat diese Eigenschaften.

EigenschaftZugriffstypBeschreibung

ActualHeight

SchreibgeschütztGets the rendered height of a FrameworkElement. (Geerbt von FrameworkElement)

ActualWidth

SchreibgeschütztGets the rendered width of a FrameworkElement. (Geerbt von FrameworkElement)

AllowDrop

Lese-/SchreibzugriffGets or sets a value that determines whether this UIElement can be a drop target for purposes of drag-and-drop operations. (Geerbt von UIElement)

BaseUri

SchreibgeschütztGets a Uniform Resource Identifier (URI) that represents the base Uniform Resource Identifier (URI) for an XAML-constructed object at XAML load time. This property is useful for Uniform Resource Identifier (URI) resolution at run time. (Geerbt von FrameworkElement)

CacheMode

Lese-/SchreibzugriffGets or sets a value that indicates that rendered content should be cached as a composited bitmap when possible. (Geerbt von UIElement)

Clip

Lese-/SchreibzugriffGets or sets the RectangleGeometry used to define the outline of the contents of a UIElement. (Geerbt von UIElement)

CompositeMode

Lese-/SchreibzugriffGets or sets a property that declares alternate composition and blending modes for the element in its parent layout and window. This is relevant for elements that are involved in a mixed XAML / Microsoft DirectX UI. (Geerbt von UIElement)

DataContext

Lese-/SchreibzugriffGets or sets the data context for a FrameworkElement when it participates in data binding. (Geerbt von FrameworkElement)

DesiredSize

SchreibgeschütztGets the size that this UIElement computed during the measure pass of the layout process. (Geerbt von UIElement)

Dispatcher

SchreibgeschütztGets the CoreDispatcher that this object is associated with. (Geerbt von DependencyObject)

FlowDirection

Lese-/SchreibzugriffGets or sets the direction in which text and other UI elements flow within any parent element that controls their layout. This property can be set to either LeftToRight or RightToLeft. Setting FlowDirection to RightToLeft on any element sets the alignment to the right, the reading order to right-to-left and the layout of the control to flow from right to left. (Geerbt von FrameworkElement)

Height

Lese-/SchreibzugriffGets or sets the suggested height of a FrameworkElement. (Geerbt von FrameworkElement)

HorizontalAlignment

Lese-/SchreibzugriffGets or sets the horizontal alignment characteristics that are applied to a FrameworkElement when it is composed in a layout parent, such as a panel or items control. (Geerbt von FrameworkElement)

IsDoubleTapEnabled

Lese-/SchreibzugriffGets or sets a value that determines whether the DoubleTapped event can originate from that element. (Geerbt von UIElement)

IsHitTestVisible

Lese-/SchreibzugriffGets or sets whether the contained area of this UIElement can return true values for hit testing. (Geerbt von UIElement)

IsHoldingEnabled

Lese-/SchreibzugriffGets or sets a value that determines whether the Holding event can originate from that element. (Geerbt von UIElement)

IsRightTapEnabled

Lese-/SchreibzugriffGets or sets a value that determines whether the RightTapped event can originate from that element. (Geerbt von UIElement)

IsTapEnabled

Lese-/SchreibzugriffGets or sets a value that determines whether the Tapped event can originate from that element. (Geerbt von UIElement)

Language

Lese-/SchreibzugriffGets or sets localization/globalization language information that applies to a FrameworkElement, and also to all child elements of the current FrameworkElement in the object representation and in UI. (Geerbt von FrameworkElement)

ManipulationMode

Lese-/SchreibzugriffGets or sets the ManipulationModes value used for UIElement behavior and interaction with gestures. Setting this value enables handling the manipulation events from this element in app code. (Geerbt von UIElement)

Margin

Lese-/SchreibzugriffGets or sets the outer margin of a FrameworkElement. (Geerbt von FrameworkElement)

MaxHeight

Lese-/SchreibzugriffGets or sets the maximum height constraint of a FrameworkElement. (Geerbt von FrameworkElement)

MaxWidth

Lese-/SchreibzugriffGets or sets the maximum width constraint of a FrameworkElement. (Geerbt von FrameworkElement)

MinHeight

Lese-/SchreibzugriffGets or sets the minimum height constraint of a FrameworkElement. (Geerbt von FrameworkElement)

MinWidth

Lese-/SchreibzugriffGets or sets the minimum width constraint of a FrameworkElement. (Geerbt von FrameworkElement)

Name

Lese-/SchreibzugriffGets or sets the identifying name of the object. When a XAML processor creates the object tree from XAML markup, run-time code can refer to the XAML-declared object by this name. (Geerbt von FrameworkElement)

NineGrid

Lese-/SchreibzugriffGets or sets a value for a nine-grid metaphor that controls how the image can be resized. The nine-grid metaphor enables you to stretch edges and corners of an image differently than its center.

NineGridProperty

SchreibgeschütztIdentifies the NineGrid dependency property.

Opacity

Lese-/SchreibzugriffGets or sets the degree of the object's opacity. (Geerbt von UIElement)

Parent

SchreibgeschütztGets the parent object of this FrameworkElement in the object tree. (Geerbt von FrameworkElement)

PlayToSource

SchreibgeschütztGets the information that is transmitted if the Image is used for a Play To scenario.

PlayToSourceProperty

SchreibgeschütztIdentifies the PlayToSource dependency property.

PointerCaptures

SchreibgeschütztGets the set of all captured pointers, represented as Pointer values. (Geerbt von UIElement)

Projection

Lese-/SchreibzugriffGets or sets the perspective projection (3-D effect) to apply when rendering this element. (Geerbt von UIElement)

RenderSize

SchreibgeschütztGets the final render size of a UIElement. (Geerbt von UIElement)

RenderTransform

Lese-/SchreibzugriffGets or sets transform information that affects the rendering position of a UIElement. (Geerbt von UIElement)

RenderTransformOrigin

Lese-/SchreibzugriffGets or sets the origin point of any possible render transform declared by RenderTransform, relative to the bounds of the UIElement. (Geerbt von UIElement)

RequestedTheme

Lese-/SchreibzugriffGets or sets the UI theme that is used by the UIElement (and its child elements) for resource determination. The UI theme you specify with RequestedTheme can override the app-level RequestedTheme. (Geerbt von FrameworkElement)

Resources

Lese-/SchreibzugriffGets the locally defined resource dictionary. In XAML, you can establish resource items as child object elements of a frameworkElement.Resources property element, through XAML implicit collection syntax. (Geerbt von FrameworkElement)

Source

Lese-/SchreibzugriffGets or sets the source for the image.

SourceProperty

SchreibgeschütztIdentifies the Source dependency property.

Stretch

Lese-/SchreibzugriffGets or sets a value that describes how an Image should be stretched to fill the destination rectangle.

StretchProperty

SchreibgeschütztIdentifies the Stretch dependency property.

Style

Lese-/SchreibzugriffGets or sets an instance Style that is applied for this object during layout and rendering. (Geerbt von FrameworkElement)

Tag

Lese-/SchreibzugriffGets or sets an arbitrary object value that can be used to store custom information about this object. (Geerbt von FrameworkElement)

Transitions

Lese-/SchreibzugriffGets or sets the collection of Transition style elements that apply to a UIElement. (Geerbt von UIElement)

Triggers

SchreibgeschütztGets the collection of triggers for animations that are defined for a FrameworkElement. Not commonly used. (Geerbt von FrameworkElement)

UseLayoutRounding

Lese-/SchreibzugriffGets or sets a value that determines whether rendering for the object and its visual subtree should use rounding behavior that aligns rendering to whole pixels. (Geerbt von UIElement)

VerticalAlignment

Lese-/SchreibzugriffGets or sets the vertical alignment characteristics that are applied to a FrameworkElement when it is composed in a parent object such as a panel or items control. (Geerbt von FrameworkElement)

Visibility

Lese-/SchreibzugriffGets or sets the visibility of a UIElement. A UIElement that is not visible is not rendered and does not communicate its desired size to layout. (Geerbt von UIElement)

Width

Lese-/SchreibzugriffGets or sets the width of a FrameworkElement. (Geerbt von FrameworkElement)

 

Hinweise

Bilddateiformate

Ein Image kann diese Bilddateiformate anzeigen:

  • JPEG (Joint Photographic Experts Group)
  • PNG (Portable Network Graphics)
  • Bitmap (BMP)
  • GIF (Graphics Interchange Format)
  • Tagged Image File Format (TIFF)
  • JPEG XR
  • Symbole (ICO)

Festlegen von "Image.Source"

Um die Bildquelldatei festzulegen, die ein Image anzeigt, legen Sie seine Source-Eigenschaft entweder in XAML oder im Code fest. Im Folgenden finden Sie ein einfaches Beispiel für das Festlegen von Source in XAML:


<Image Width="200" Source="Images/myimage.png" />

Hierbei wird Source mithilfe eines URI (Uniform Resource Identifier) festgelegt, bei dem es sich um eine Abkürzung handelt, die von XAML ermöglicht wird. Beachten Sie, dass der URI hier ein relativer URI zu sein scheint. Die Unterstützung partieller URIs ist ein weiterer einfacher Lösungsweg von XAML. Der Stamm dieses URI ist der Basisordner für ein App-Projekt. Dies ist normalerweise derselbe Speicherort, von dem aus die XAML-Datei geladen wird, die das Image-Tag enthält. In diesem Beispiel befindet sich die Bildquelldatei in einem Images-Unterordner innerhalb der Dateistruktur der App.

Das Festlegen der Source-Eigenschaft ist grundsätzlich eine asynchrone Aktion. Da dies eine Eigenschaft ist, gibt es keine Awaitable-Syntax. Für die meisten Szenarien müssen Sie jedoch nicht mit den asynchronen Aspekten des Ladens von Bildern interagieren. Das Framework wartet darauf, dass die Bildquelle zurückgegeben wird, und startet einen Layoutzyklus, wenn die Bildquelldatei verfügbar und decodiert ist.

Das Festlegen einer Quelle auf einen URI-Wert, der nicht in eine gültige Bildquelldatei aufgelöst werden kann, löst keine Ausnahme aus. Stattdessen wird ein ImageFailed-Ereignis ausgelöst. Sie können einen ImageFailed-Handler schreiben und an das Image-Objekt anfügen, und Sie können möglicherweise ErrorMessage in den Ereignisdaten verwenden, um die Art des Fehlers zu bestimmen. Bei einem Fehler bei der Decodierung kann auch ImageFailed ausgelöst werden. Wenn Sie sicherstellen möchten, dass eine Bildquelldatei korrekt geladen wurde, können Sie das ImageOpened-Ereignis für das Image-Element behandeln.

In der Regel verwenden Sie Bildquelldateien, die Sie als Teil des App-Downloadpakets hinzugefügt haben. Bei großen Dateien kann eine sehr kleine Verzögerung während des Decodierens der Bildquelldatei auftreten, wenn die Quelle zum ersten Mal verwendet wird. Weitere Informationen zu App-Ressourcen und zum Packen von Bildquelldateien in ein App-Paket finden Sie unter Definieren von App-Ressourcen.

Sie können auch Bildquelldateien verwenden, die nicht Teil der App sind, beispielsweise Bilder von externen Servern. Diese Bilder werden mithilfe einer internen HTTP-Anforderung heruntergeladen und anschließend decodiert. Wenn die Bildquelldatei groß ist oder Verbindungsprobleme bestehen, gibt es möglicherweise eine Verzögerung, bevor ein externes Bild in einem Image-Element angezeigt werden kann.

Festlegen von "Image.Source" mit Code

Wenn Sie mithilfe von Code ein Image-Objekt erstellen, rufen Sie den Standardkonstruktor auf, und legen Sie dann die Image.Source-Eigenschaft fest. Zum Festlegen der Image.Source-Eigenschaft ist eine Instanz der BitmapImage-Klasse erforderlich, die Sie ebenfalls erstellen müssen. Wenn es sich bei der Bildquelle um eine Datei handelt, auf die durch einen URI verwiesen wird, verwenden Sie den BitmapImage-Konstruktor, der einen URI-Parameter akzeptiert. Wenn Sie auf lokale Inhalte verweisen, müssen Sie das ms-appx:-Schema im absoluten URI einschließen, den Sie als BitmapImage-Konstruktorparameter verwenden. Im Code stehen Ihnen die Verarbeitungsverknüpfungen zum Kombinieren von relativen URI-Teilen und dem ms-appx:-Schema nicht zur Verfügung. Dies geschieht automatisch, wenn Sie Source als XAML-Attribut angeben. Stattdessen müssen Sie explizit einen absoluten URI mit dem entsprechenden Schema erstellen. In der Regel verwenden Sie das ms-appx:-Schema für eine Bilddatei, die im App-Paket enthalten ist.

Tipp  Wenn Sie C# oder Microsoft Visual Basic verwenden, können Sie die BaseUri-Eigenschaft der Image-Klasse abrufen und als baseUri-Parameter für System.Uri-Konstruktoren übergeben, die einen URI-Basisspeicherort und einen relativen Pfad in diesem Speicherort kombinieren.

Im Folgenden findet sich ein Beispiel für das Festlegen der Image.Source in C#. In diesem Beispiel wurde das Image-Objekt in XAML erstellt, verfügt jedoch nicht über eine Quelle oder andere Eigenschaftswerte. Stattdessen werden diese Werte zur Laufzeit bereitgestellt, wenn Image von XAML geladen wird.


void Image_Loaded(object sender, RoutedEventArgs e)
{
    Image img = sender as Image; 
    BitmapImage bitmapImage = new BitmapImage();
    img.Width = bitmapImage.DecodePixelWidth = 80; //natural px width of image source
    // don't need to set Height, system maintains aspect ratio, and calculates the other
    // dimension, so long as one dimension measurement is provided
    bitmapImage.UriSource = new Uri(img.BaseUri,"Images/myimage.png");
}

Verwenden einer Streamquelle für eine Bildquelle

Wenn es sich bei der Bildquelle um einen Stream handelt, müssen Sie Code schreiben, der für die Image-Instanz festlegt, dass der Stream verwendet werden soll. Dies kann nicht allein in XAML durchgeführt werden. Erstellen Sie das zu verwendende Image-Objekt, oder verweisen Sie auf eine vorhandene Image-Instanz (die möglicherweise in XAML-Markup definiert wurde, jedoch ohne Angabe einer Quelle). Verwenden Sie dann die asynchrone SetSourceAsync-Methode von BitmapImage, um die Bildinformationen aus einem Stream zu definieren, indem Sie den zu verwendenden Stream als streamSource-Parameter übergeben. Die Verwendung eines Streams für eine Bildquelle ist recht üblich. Wenn Ihre App es einem Benutzer beispielsweise ermöglicht, eine Bilddatei mithilfe eines FileOpenPicker-Steuerelements auszuwählen, kann das Objekt, das Sie abrufen und die vom Benutzer ausgewählte Datei darstellt, als Stream geöffnet werden, stellt jedoch keinen URI-Verweis auf die Datei bereit.

In diesem Beispiel ist der Code bereits "awaitable", da er darauf wartet, dass der Benutzer eine Datei auswählt, und erst ausgeführt wird, nachdem dies geschehen ist. Der zu verwendende Stream stammt von StorageFile.OpenAsync, nachdem eine StorageFile-Instanz von asynchronen Auswahlaktionen zurückgegeben wurde.


FileOpenPicker open = new FileOpenPicker(); 
// Open a stream for the selected file 
StorageFile file = await open.PickSingleFileAsync(); 
// Ensure a file was selected 
if (file != null) 
{ 
    using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read)) 
    { 
        // Set the image source to the selected bitmap 
         BitmapImage bitmapImage = new BitmapImage(); 
         bitmapImage.DecodePixelWidth = 600; //match the target Image.Width, not shown
         await bitmapImage.SetSourceAsync(fileStream); 
         Scenario2Image.Source = bitmapImage; 
    } 
}

Tipp  Wenn Sie C# oder Visual Basic verwenden, können Streams den System.IO.Stream-Typ verwenden, mit dem Sie möglicherweise aufgrund von früheren Microsoft .NET-Programmiererfahrungen vertraut sind. Sie können die AsStream-Erweiterungsmethode als Instanzmethode für jedes Objekt des Typs IRandomAccessStream aufrufen, das Sie von einer Windows-Runtime-API erhalten haben. Im vorherigen Beispiel wurde IRandomAccessStream für die Parameterübergabe verwendet, und AsStream musste nicht verwendet werden. Wenn Sie den Stream jedoch bearbeiten müssen, können Sie bei Bedarf AsStream als Hilfsprogramm zum Konvertieren in System.IO.Stream verwenden.

Weiteren Beispielcode finden Sie im Beispiel zu XAML-Bildern.

Bilddateien und Leistung

Große Bilddateien können die Leistung beeinflussen, da sie in den Arbeitsspeicher geladen werden. Wenn Sie auf eine Bilddatei verweisen, von der Sie wissen, dass die Quelldatei ein großes Bild mit einer hohen Auflösung ist, dieses von Ihrer App jedoch in einem Benutzeroberflächenbereich angezeigt wird, der kleiner als die Originalgröße des Bilds ist, sollten Sie die DecodePixelWidth- oder die DecodePixelHeight-Eigenschaft festlegen. Die DecodePixel*-Eigenschaften ermöglichen es Ihnen, Informationen direkt an den formatspezifischen Codec zu übergeben. Der Codec kann diese Informationen verwenden, um effizienter und mit geringerem Arbeitsspeicherbedarf zu decodieren. Legen Sie für DecodePixelWidth die Pixelbreite des Bereichs fest, der von Ihrer Anwendung tatsächlich angezeigt werden soll. Das bedeutet, dass der Wert von DecodePixelWidth für die BitmapImage-Quelle mit dem Wert von Width oder ActualWidth des Image-Steuerelements, das diese Quelle anzeigt, identisch sein muss.

Sie können entweder DecodePixelWidth oder DecodePixelHeight festlegen. Wenn Sie eine dieser beiden Eigenschaften festlegen, berechnet das System die dazu passende Eigenschaft so, dass das richtige Seitenverhältnis beibehalten wird. Sie können auch beide Eigenschaften festlegen, Sie sollten jedoch in jedem Fall Werte verwenden, bei denen das Seitenverhältnis beibehalten wird. Wenn Sie Seitenverhältnisse ändern möchten, gibt es dafür bessere Möglichkeiten, beispielsweise die Verwendung einer TranslateTransform-Klasse als RenderTransform-Eigenschaft.

Zum Festlegen von DecodePixelWidth (oder DecodePixelHeight) in XAML müssen Sie wie folgt eine etwas ausführlichere XAML-Syntax verwenden, die ein explizites BitmapImage-Element als Eigenschaftenelementwert enthält:


<Image>
  <Image.Source>
    <BitmapImage DecodePixelWidth="200" UriSource="images/myimage.png" />
  </Image.Source>
</Image>


DecodePixelWidth und DecodePixelHeight sind Eigenschaften von BitmapImage. Daher benötigen Sie ein explizites BitmapImage-XAML-Objektelement, um die DecodePixel*-Eigenschaften als Attribute in XAML festzulegen.

Wenn Sie eine Image-Instanz im Code erstellen, erstellen Sie wahrscheinlich bereits eine BitmapImage-Instanz als Wert für die Source-Eigenschaft. Legen Sie daher lediglich DecodePixelWidth (oder DecodePixelHeight) für die BitmapImage-Instanz fest, bevor Sie die UriSource-Eigenschaft festlegen. Die DecodePixelType-Eigenschaft beeinflusst auch die Art und Weise, in der Pixelwerte durch die Decodiervorgänge interpretiert werden.

Weisen Sie möglichst einen URI als Bildquelleneigenschaft zu statt Speicherstreams zu verwenden, damit Bilder nicht mehrmals decodiert werden. Das XAML-Framework kann einem decodierten Bild denselben URI an mehreren Stellen zuordnen. Dies ist jedoch nicht für mehrere Speicherstreams möglich, selbst wenn sie die gleichen Daten enthalten.

Sie können Bilddateien aus dem Bildcache entfernen, indem Sie für alle zugeordneten Image.Source-Werte null festlegen.

Weitere Informationen zur Image-Klasse und zur Leistung finden Sie unter Optimieren von Medienressourcen.

Codieren und Decodieren von Bilddateien

Die zugrunde liegende Codecunterstützung für Bilddateien wird durch die WIC-API (Windows Imaging Component, Windows-Bilderstellungskomponente) bereitgestellt. Weitere Informationen zu bestimmten Bildformaten, wie für die Codecs dokumentiert, finden Sie im Artikel zu den systemeigenen WIC-Codecs.

Die API für Image, BitmapImage und BitmapSource schließt keine dedizierten Methoden zum Codieren und Decodieren von Medienformaten ein. Alle Decodierungsvorgänge sind als Aktionen integriert, die ausgeführt werden, wenn die Quelle festgelegt oder zurückgesetzt wird. Dadurch können die Klassen einfacher für das Erstellen der Benutzeroberfläche verwendet werden, da sie über einen Standardsatz an unterstützten Quelldateiformaten verfügen und ein Standarddecodierungsverhalten aufweisen. Klassen wie BitmapImage stellen einige der Decodierungsoptionen und der Logik als Teil der Ereignisdaten für ImageOpened- oder ImageFailed-Ereignisse zur Verfügung. Wenn Sie die erweiterte Bilddateidecodierung oder die Bildcodierung benötigen, sollten Sie die APIs aus dem Windows.Graphics.Imaging-Namespace verwenden. Sie benötigen diese APIs möglicherweise, wenn in der App Bilddateiformate konvertiert werden oder ein Bild bearbeitet werden kann und Benutzer das Ergebnis als Datei speichern können. Die Codierungs-APIs werden auch von der WIC-Komponente von Windows unterstützt.

Image-Breite und -Höhe

Die Image-Klasse erbt die Width- und die Height-Eigenschaft von FrameworkElement, und diese Eigenschaften steuern möglicherweise die Größe, mit der das Image-Steuerelement bei der Anzeige in der Benutzeroberfläche gerendert wird. Wenn Sie keinen Wert für Width oder Height festlegen, wird die Breite und die Höhe durch die Originalgröße der Bildquelle bestimmt. Wenn Sie beispielsweise ein Bitmapbild laden, das 300 Pixel hoch und 400 Pixel breit ist, wie im Quelldateiformat aufgezeichnet, werden diese Maße für die Breite und Höhe verwendet, wenn das Image-Steuerelement seine Originalgröße berechnet. Sie können ActualHeight und ActualWidth zur Laufzeit überprüfen, nachdem das Bild gerendert wurde, um die Maße abzurufen. Sie können auch ImageOpened behandeln und Bilddateieigenschaften wie PixelHeight und PixelWidth unmittelbar vor dem Rendern des Bilds überprüfen.

Wenn Sie nur die Width- oder die Height-Eigenschaft festlegen, jedoch nicht beide, kann das System die festgelegte Dimension als Orientierungshilfe verwenden und die jeweils andere unter Beibehaltung des Seitenverhältnisses berechnen. Wenn Sie nicht sicher sind, welche Maße die Quelldatei aufweist, wählen Sie die Dimension aus, die für die Steuerung in Ihrem Layoutszenario am wichtigsten ist und lassen Sie das System die andere Dimension berechnen. Das Layout wird dann in der Regel aufgrund des Layoutverhaltens des Containers entsprechend angepasst.

Wenn Sie Width und/oder Height nicht festlegen und das Bild in der Originalgröße belassen, kann die Stretch-Eigenschaft für das Bild steuern, wie die Bildquelldatei den Platz ausfüllt, den Sie mit Width und Height angeben. Der Standardwert für Stretch ist Uniform, bei dem das Seitenverhältnis beim Einpassen des Bilds in einen Layoutcontainer beibehalten wird. Wenn die Maße des Containers nicht dasselbe Seitenverhältnis aufweisen, gibt es Leerraum, der dennoch Teil von Image ist, in dem jedoch keine Bildpixel angezeigt werden. Dies gilt zumindest bei der Verwendung des Uniform-Werts für Stretch. UniformToFill für Stretch lässt keinen Platz frei, schneidet das Bild jedoch möglicherweise zu, wenn die Maße unterschiedlich sind. Fill für Stretch lässt zwar keinen Platz frei, ändert möglicherweise jedoch das Seitenverhältnis. Sie können mit diesen Werten experimentieren, um zu sehen, was für die Bildanzeige in Ihrem Layoutszenario am besten ist. Beachten Sie außerdem, dass bestimmte Layoutcontainer die Größe eines Bilds, für das keine bestimmten Werte für Width und Height angegeben sind, möglicherweise so anpassen, dass es den gesamten Layoutbereich ausfüllt. In diesem Fall können Sie eine bestimmte Größe für das Bild oder den Container festlegen.

NineGrid

Die NineGrid-Technik ist eine andere Option für die Größenanpassung von Bildern, die eine andere Originalgröße als der Anzeigebereich aufweisen, wenn das Bild über Bereiche verfügt, die nicht gleichmäßig skaliert werden sollen. Sie können beispielsweise ein Hintergrundbild verwenden, das einen inhärenten Rahmen hat, der nur in einer Dimension gestreckt werden soll, und Ecken aufweist, die gar nicht gestreckt werden sollten. Die Bildmitte kann jedoch gestreckt werden, um die Layoutanforderungen in beiden Dimensionen erfüllen zu können. Weitere Informationen finden Sie unter NineGrid.

Ressourcenqualifizierung und -lokalisierung für Image

Image-Quelldateien und -Skalierung

Sie sollten die Imagequellen in mehreren empfohlenen Größen erstellen, um sicherzustellen, dass die App bei der Skalierung durch Windows 8 ein gutes Erscheinungsbild hat. Wenn Sie Source für ein Image angeben, können Sie eine Namenskonvention für Ressourcen verwenden, die die richtige Ressource für gerätespezifische Skalierungsfaktoren verwendet. Dies wird durch die App zur Laufzeit automatisch bestimmt. Einzelheiten zur Namenskonvention, die verwendet werden sollte, und weitere Informationen finden Sie unter Schnellstart: Verwenden von Datei- oder Bildressourcen.

Weitere Informationen dazu, wie Bilder ordnungsgemäß für eine Skalierung entworfen werden, finden Sie unter Richtlinien für die Skalierung zur Pixeldichte.

Verwenden von nicht qualifizierten Ressourcen

Nicht qualifizierte Ressourcen stellen eine Technik dar, die Sie verwenden können, wenn sich der grundlegende Ressourcenverweis auf eine Standardressource bezieht und der Ressourcenverwaltungsprozess die entsprechende lokalisierte Ressource automatisch finden kann. Sie können die automatische Behandlung für den Zugriff auf nicht qualifizierte Ressourcen mit aktuellen Skalierungs- und Kulturqualifizierern oder die ResourceManager-Qualifizierer und ResourceMap-Qualifizierer für Kultur und Skalierung verwenden, um die Ressourcen direkt zu erhalten. Weitere Informationen finden Sie unter Ressourcenverwaltungssystem.

FlowDirection für Bild

Wenn Sie für Image den Wert FlowDirection auf RightToLeft setzen, wird der visuelle Inhalt von Image horizontal gekippt. Ein Image-Element erbt jedoch nicht den FlowDirection-Wert von einem übergeordneten Element. In der Regel sollten Sie Kippverhalten nur in Bildern verwenden, die für das Layout relevant sind, jedoch nicht unbedingt für Elemente, in denen Text oder andere Komponenten eingebettet sind, bei denen das Kippen für eine Zielgruppe mit einer von rechts nach links gelesenen Sprache mit nicht sinnvoll wäre. Um das Verhalten des Kippvorgangs eines Bildes abzurufen, müssen Sie das FlowDirection-Element für das Image-Element speziell auf RightToLeft festlegen oder die FlowDirection-Eigenschaft in Code-Behind festlegen. Erwägen Sie, das Image-Element durch x:Uid zu identifizieren und FlowDirection-Werte als Windows-Runtime-Ressource anzugeben, sodass die Lokalisierungsexperten diesen Wert später ändern können, ohne die XAML oder den Code zu ändern.

"Image"-Klasse und Barrierefreiheit

Die Image-Klasse ist keine echte Steuerelementklasse, da sie keine abgeleitete Klasse von Control ist. Sie können den Fokus zu einem Image-Element nicht aufrufen oder ein Image-Element in einer Tabulatorsequenz platzieren. Weitere Informationen zu Aspekten der Barrierefreiheit bei der Verwendung von Bildern und des Image-Elements in der Benutzeroberfläche finden Sie unter Verfügbarmachen von grundlegenden Informationen zu Benutzeroberflächenelementen.

Windows 8-Verhalten

Bei Windows 8 können Ressourcen ein Ressourcenqualifizierermuster verwenden, um verschiedene Ressourcen je nach gerätespezifischer Skalierung zu laden. Ressourcen werden jedoch nicht automatisch erneut geladen, wenn sich der Skalierungsfaktor ändert, während die App ausgeführt wird. In diesem Fall würden Apps das erneute Laden von Ressourcen übernehmen müssen, indem das DpiChanged-Ereignis (oder das veraltete LogicalDpiChanged-Ereignis) behandelt wird und mithilfe von ResourceManager-APIs die Ressource, die für den neuen Skalierungsfaktor geeignet ist, manuell erneut zu laden. Ab Windows 8.1 wird jede Ressource, die ursprünglich für die App abgerufen wurde, automatisch neu ausgewertet, wenn sich der Skalierungsfaktor ändert, während die App ausgeführt wird. Wenn zudem diese Ressource die Bildquelle für ein Image-Objekt ist, wird eines der Ereignisse beim Laden der Quelle (ImageOpened oder ImageFailed) als Folge der Anforderung der neuen Ressource durch das System und der Zuweisung dieser Ressource an Image ausgelöst. Eine Skalierungsänderung zur Laufzeit kann auftreten, wenn der Benutzer die Anwendung auf einen anderen Bildschirm verschiebt, sofern mehrere zur Verfügung stehen.

Wenn Sie den App-Code von Windows 8 nach Windows 8.1 migrieren, müssen Sie diese Verhaltensänderung berücksichtigen, da sie zu ImageOpened- oder ImageFailed-Ereignissen führt, die zur Laufzeit auftreten, wenn die Größenänderung behandelt wird, und dies sogar dann, wenn die Source in XAML festgelegt ist. Zudem sollten Sie, wenn Sie einen Code hatten, der DpiChanged/LogicalDpiChanged behandelt und die Ressourcen zurückgesetzt hat, prüfen, ob der Code weiterhin das neue automatische Verhalten zum erneuten Laden benötigt.

Apps, die für Windows 8 kompiliert wurden, jedoch unter Windows 8.1 ausgeführt werden, verwenden weiterhin das Windows 8-Verhalten.

Anforderungen

Mindestens unterstützter Client

Windows 8 [Nur Windows Store-Apps]

Mindestens unterstützter Server

Windows Server 2012 [Nur Windows Store-Apps]

Namespace

Windows.UI.Xaml.Controls
Windows::UI::Xaml::Controls [C++]

Metadaten

Windows.winmd

Siehe auch

FrameworkElement
Schnellstart: Image und ImageBrush
Beispiel für XAML-Bilder
Medienressourcen optimieren
BitmapSource
FlowDirection
Windows.Graphics.Imaging
Source

 

 

Anzeigen:
© 2017 Microsoft