Ovládací prvok Obrázok v službe PowerAppsImage control in PowerApps

Ovládací prvok, ktorý zobrazí obrázok napríklad z lokálneho súboru alebo zdroja údajov.A control that shows an image from, for example, a local file or a data source.

PopisDescription

Ak pridáte do aplikácie jeden alebo viac ovládacích prvkov Obrázok, budete môcť zobrazovať jednotlivé obrázky, ktoré nie sú súčasťou množiny údajov, alebo budete môcť začleniť obrázky zo záznamov v zdroji údajov.If you add one or more Image controls to your app, you can show individual images that aren't part of a data set, or you can incorporate images from records in data sources.

Základné vlastnostiKey properties

Image – názov obrázka, ktorý sa zobrazuje v ovládacích prvkoch Obrázok, Zvuk alebo Mikrofón.Image – The name of the image that appears in an image, audio, or microphone control.

Ďalšie vlastnostiAdditional properties

AccessibleLabel – označenie pre čítačky obrazovky.AccessibleLabel – Label for screen readers.

ApplyEXIFOrientation – určuje, či sa má automaticky použiť orientácia určená údajmi EXIF vložených s obrázkom.ApplyEXIFOrientation – Whether to automatically apply the orientation specified in the EXIF data embedded with the image.

AutoDisableOnSelect – automaticky zakáže ovládací prvok v čase spustenia vlastnosti OnSelect.AutoDisableOnSelect – Automatically disables the control while the OnSelect behavior is executing.

BorderColor – farba orámovania ovládacieho prvku.BorderColor – The color of a control's border.

BorderStyle – štýl orámovania ovládacieho prvku Solid (Plné), Dashed (Prerušované), Dotted (Bodkované) alebo None (Žiadne).BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – hrúbka ohraničenia ovládacieho prvku.BorderThickness – The thickness of a control's border.

CalculateOriginalDimensions – povoľuje vlastnosti OriginalHeight a OriginalWidth.CalculateOriginalDimensions – Enables the OriginalHeight and OriginalWidth properties.

DisplayMode – údaj o tom, či ovládací prvok umožňuje zadávanie používateľom (Edit), iba zobrazuje údaje (View) alebo je zakázaný (Disabled).DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – farba orámovania ovládacieho prvku v prípade, že je vlastnosť DisplayMode nastavená na možnosť Disabled (Zakázané).DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledFill – farba pozadia ovládacieho prvku v prípade, že vlastnosť DisplayMode je nastavená na Disabled (Zakázané).DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill – farba pozadia ovládacieho prvku.Fill – The background color of a control.

FlipHorizontal – určuje, či sa má obrázok pred zobrazením prevrátiť vodorovne.FlipHorizontal – Whether to flip the image horizontally before displaying it.

FlipVertical – určuje, či sa má obrázok pred zobrazením prevrátiť zvisle.FlipVertical – Whether to flip the image vertically before displaying it.

FocusedBorderColor – farba orámovania zameraného ovládacieho prvku.FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – hrúbka orámovania zameraného ovládacieho prvku.FocusedBorderThickness – The thickness of a control's border when the control is focused.

Height – vzdialenosť medzi horným a dolným okrajom ovládacieho prvku.Height – The distance between a control's top and bottom edges.

HoverBorderColor – farba orámovania ovládacieho prvku pri umiestnení ukazovateľa myši na ovládací prvok.HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverFill – farba pozadia ovládacieho prvku pri umiestnení ukazovateľa myši na ovládací prvok.HoverFill – The background color of a control when the user keeps the mouse pointer on it.

ImagePosition – pozícia obrázka (Fill (Vyplniť), Fit (Prispôsobiť), Stretch (Roztiahnuť), Tile (Dlaždice) alebo Center (Na stred)) na obrazovke alebo ovládacom prvku, ak nie je rovnakej veľkosti ako obrázok.ImagePosition – The position (Fill, Fit, Stretch, Tile, or Center) of an image in a screen or a control if it isn't the same size as the image.

ImageRotation – spôsob otočenia obrázka pred zobrazením.ImageRotation – How to rotate the image before displaying it. Hodnoty môžu byť none (nijako), clokwise (CW) 90 degrees (o 90 stupňov v smere hodinových ručičiek), counter-clockwise (CCW) 90 degrees (o 90 stupňov proti smeru hodinových ručičiek) a clockwise 180 degrees (o 180 stupňov v smere hodinových ručičiek.Values can be none, clockwise (CW) 90 degrees, counter-clockwise (CCW) 90 degrees and clockwise 180 degrees.

OnSelect – spôsob reakcie aplikácie na ťuknutie alebo kliknutie na ovládací prvok používateľom.OnSelect – How the app responds when the user taps or clicks a control.

OriginalHeight – pôvodná výška obrázka povolená vlastnosťou CalculateOriginalDimensions.OriginalHeight – Original height of an image, enabled with the CalculateOriginalDimensions property.

OriginalWidth – pôvodná šírka obrázka povolená vlastnosťou CalculateOriginalDimensions.OriginalWidth – Original width of an image, enabled with the CalculateOriginalDimensions property.

PaddingBottom – vzdialenosť medzi textom v ovládacom prvku a dolným okrajom tohto prvku.PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft – vzdialenosť medzi textom v ovládacom prvku a ľavým okrajom rovnakého prvku.PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight – vzdialenosť medzi textom v ovládacom prvku a pravým okrajom rovnakého prvku.PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop – vzdialenosť medzi textom v ovládacom prvku a horným okrajom rovnakého prvku.PaddingTop – The distance between text in a control and the top edge of that control.

PressedBorderColor – farba orámovania ovládacieho prvku po ťuknutí alebo kliknutí na ovládací prvok používateľom.PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedFill – farba pozadia ovládacieho prvku po ťuknutí alebo kliknutí na ovládací prvok používateľom.PressedFill – The background color of a control when the user taps or clicks that control.

RadiusBottomLeft – polomer zaoblenia ľavého dolného rohu ovládacieho prvku.RadiusBottomLeft – The degree to which the bottom-left corner of a control is rounded.

RadiusBottomRight – polomer zaoblenia pravého dolného rohu ovládacieho prvku.RadiusBottomRight – The degree to which the bottom-right corner of a control is rounded.

RadiusTopLeft – polomer zaoblenia ľavého horného rohu ovládacieho prvku.RadiusTopLeft – The degree to which the top-left corner of a control is rounded.

RadiusTopRight – polomer zaoblenia pravého horného rohu ovládacieho prvku.RadiusTopRight – The degree to which the top-right corner of a control is rounded.

TabIndex – príkaz na navigáciu pomocou klávesnice vo vzťahu k iným ovládacím prvkom.TabIndex – Keyboard navigation order in relation to other controls.

Tooltip – vysvetľujúci text, ktorý sa zobrazí, keď používateľ ukáže myšou na ovládací prvok.Tooltip – Explanatory text that appears when the user hovers over a control.

Transparency – úroveň viditeľnosti ovládacích prvkov za obrázkom.Transparency – The degree to which controls behind an image remain visible.

Visible – možnosť zobrazenia alebo skrytia ovládacieho prvku.Visible – Whether a control appears or is hidden.

Width – vzdialenosť medzi ľavým a pravým okrajom ovládacieho prvku.Width – The distance between a control's left and right edges.

X – vzdialenosť medzi ľavým okrajom ovládacieho prvku a ľavým okrajom jeho nadradeného kontajnera (alebo obrazovky, ak sa nadradený kontajner nepoužíva).X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – vzdialenosť medzi horným okrajom ovládacieho prvku a horným okrajom jeho nadradeného kontajnera (alebo obrazovky, ak sa nadriadený kontajner nepoužíva).Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Remove( ZdrojÚdajov, ThisItem )Remove( DataSource, ThisItem )

PríkladyExamples

Zobrazenie obrázka z lokálneho súboruShow an image from a local file

  1. V ponuke Súbor kliknite alebo ťuknite na položku Médiá a potom kliknite alebo ťuknite na možnosť Prehľadávať.On the File menu, click or tap Media, and then click or tap Browse.

  2. Kliknite alebo ťuknite na súbor s obrázkom, ktorý chcete pridať, kliknite alebo ťuknite na možnosť Otvoriť a potom sa stlačením klávesa Esc vráťte do predvoleného pracovného priestoru.Click or tap the image file that you want to add, click or tap Open, and then press Esc to return to the default workspace.

  3. Pridajte ovládací prvok Obrázok a do jeho vlastnosti Image nastavte názov súboru, ktorý ste pridali.Add an Image control, and set its Image property to the name of the file that you added.

    Pozrite sa, ako pridať a nakonfigurovať ovládací prvok.Don't know how to add and configure a control?

    Ovládací prvok Obrázok zobrazí zadaný obrázok.The Image control shows the image that you specified.

Zobrazenie množiny obrázkov zo zdroja údajovShow a set of images from a data source

  1. Stiahnite si tento excelový súbor a uložte ho do lokálneho zariadenia.Download this Excel file, and save it on your local device.

  2. V službe PowerApps Studio vytvorte alebo otvorte aplikáciu a potom v pravej table kliknite alebo ťuknite na položku Pridať zdroj údajov.In PowerApps Studio, create or open an app, and then click or tap Add data source in the right-hand pane.

    Ak sa položka Pridať zdroj údajov v pravej table nezobrazí, kliknite alebo ťuknite na obrazovku na ľavom navigačnom paneli.If Add data source doesn't appear in the right-hand pane, click or tap a screen in the left navigation bar.

  3. Kliknite alebo ťuknite na položku Pridať statické údaje do aplikácie, kliknite alebo ťuknite na stiahnutý excelový súbor a potom kliknite alebo ťuknite na možnosť Otvoriť.Click or tap Add static data to your app, click or tap the Excel file that you downloaded, and then click or tap Open.

  4. Vyberte začiarkavacie políčko Flooring Estimates (odhad nákladov podlahových materiálov) a potom kliknite alebo ťuknite na možnosť Pripojiť.Select the Flooring Estimates check box, and then click or tap Connect.

  5. Pridajte ovládací prvok Galéria s obrázkami a do jeho vlastnosti Items nastavte FlooringEstimates.Add a Gallery control with images, and set its Items property to FlooringEstimates.

    Pozrite sa, ako pridať a nakonfigurovať ovládací prvok.Don't know how to add and configure a control?

    Ovládací prvok Galéria zobrazí produktové obrázky kobercov, dreva a dlaždíc na základe odkazov v stiahnutom excelovom súbore.The Gallery control shows images of carpet, hardwood, and tile products based on links in the Excel file that you downloaded.

Pokyny na zjednodušenie ovládaniaAccessibility guidelines

Farebný kontrastColor contrast

Podpora čítačiek obrazovkyScreen reader support

  • Musí existovať vlastnosť AccessibleLabel, ak grafika slúži ako tlačidlo alebo nie je určená len na dekoráciu.AccessibleLabel must be present, if the graphic is used as a button or is otherwise not just for decoration.
  • Vlastnosť AccessibleLabel musí byť prázdna alebo musí obsahovať prázdny reťazec "", ak je grafika určená len na dekoráciu.AccessibleLabel must be empty or the empty string "", if the graphic is purely for decoration. Čítačky obrazovky tak budú grafiku ignorovať.This causes screen readers to ignore the graphic.
  • Vlastnosť AccessibleLabel môže byť prázdna alebo môže obsahovať prázdny reťazec "", ak grafika poskytuje nadbytočné informácie.AccessibleLabel can be empty or the empty string "", if the graphic provides redundant information.
    • Príkladom je obrázok ozubených koliesok s vlastnosťou AccessibleLabel nastavenou na možnosť Nastavenia.For example, an Image of gears with its AccessibleLabel set to Settings. Tento obrázok sa nepoužíva ako tlačidlo.This image is not used as a button. Nachádza sa vedľa ovládacieho prvku Označenie, ktorý má takisto text Nastavenia.It is next to a Label that also says Settings. Čítačky obrazovky budú obrázok čítať ako Nastavenia a označenie znova ako Nastavenia.Screen readers will read the image as Settings, and the label as Settings again. To je zbytočné.This is unnecessarily verbose. V takom prípade ovládací prvok Obrázok nevyžaduje vlastnosť AccessibleLabel.In this case, the Image does not need an AccessibleLabel.

      Dôležité

      Čítačky obrazovky budú vždy čítať ovládacie prvky Obrázok, ktoré majú vlastnosť TabIndex nastavenú na nulu alebo väčšiu hodnotu, aj keď je vlastnosť AccessibleLabel prázdna.Screen readers will always read Images that have TabIndex of zero or greater, even if AccessibleLabel is empty. Je to pretože sa vykresľujú ako tlačidlá.This is because they are rendered as buttons. Ak nie je zadaná žiadna vlastnosť AccessibleLabel, čítačky obrazovky budú jednoducho grafiku čítať ako tlačidlo.If no AccessibleLabel is provided, screen readers will simply read the graphic as button.

Podpora klávesniceKeyboard support

  • Ak sa grafika používa ako tlačidlo, vlastnosť TabIndex musí byť nastavená na nulu alebo väčšiu hodnotu.TabIndex must be zero or greater, if the graphic is used as a button. Používateľom klávesnica to umožní na ňu prejsť.This allows keyboard users to navigate to it.

  • Ak sa grafika používa ako tlačidlo, ukazovatele zamerania musia byť zreteľne vidieť.Focus indicators must be clearly visible, if the graphic is used as a button. Dosiahnete to použitím vlastností FocusedBorderColor a FocusedBorderThickness.Use FocusedBorderColor and FocusedBorderThickness to achieve this.

    Poznámka

    Ak je vlastnosť TabIndex nastavená na nulu alebo väčšiu hodnotu, ovládací prvok Obrázok sa vykreslí ako tlačidlo.When TabIndex is zero or greater, the Image is rendered as a button. Vzhľad sa nezmení, ale čítačky obrazovky budú obrázok správne identifikovať ako tlačidlo.There is no change to the visual appearance, but screen readers will correctly identify the image as a button. Ak je vlastnosť TabIndex nastavená na menšiu hodnotu ako nula, ovládací prvok Obrázok sa identifikuje ako obrázok.When TabIndex is less than zero, the Image is identified as an image.