PowerApps'teki Düğme denetimiButton control in PowerApps

Kullanıcının, uygulamayla etkileşime geçmek için tıklayabileceği veya dokunabileceği bir denetimdir.A control that the user can click or tap to interact with the app.

AçıklamaDescription

Düğme denetiminin OnSelect özelliğini, kullanıcı denetime tıklayınca veya dokununca bir veya daha fazla formül çalıştıracak şekilde yapılandırın.Configure the OnSelect property of a Button control to run one or more formulas when the user clicks or taps the control.

Temel özelliklerKey properties

OnSelect: kullanıcının bir denetime dokunmasının veya tıklamasının ardından uygulamanın nasıl yanıt verdiği.OnSelect – How the app responds when the user taps or clicks a control.

Text: denetimde görüntülenen veya kullanıcının denetime yazdığı bir metin.Text – Text that appears on a control or that the user types into a control.

Ek özelliklerAdditional properties

Align: metnin, denetiminin yatay merkezine göre konumu.Align – The location of text in relation to the horizontal center of its control.

AutoDisableOnSelect: OnSelect davranışı çalışıyorken denetimi otomatik olarak devre dışı bırakır.AutoDisableOnSelect – Automatically disables the control while the OnSelect behavior is running.

BorderColor: bir denetimin kenarlığının rengi.BorderColor – The color of a control's border.

BorderStyle: Solid, Dashed, Dotted veya None değerleriyle bir denetimin kenarlık stili.BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness: bir denetimin kenarlık kalınlığı.BorderThickness – The thickness of a control's border.

FocusedBorderThickness: klavye odağı varken denetimin kenar kalınlığı.FocusedBorderThickness – The thickness of a control's border when it has keyboard focus.

Color: denetimdeki metnin rengi.Color – The color of text in a control.

DisplayMode: denetimin kullanıcı girişine izin verip vermediği (Edit), yalnızca veri görüntüleyip görüntülemediği (View) veya devre dışı olup olmadığı (Disabled).DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor: DisplayMode özelliği Disabled olarak ayarlandığında denetimin kenarlık rengi.DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor: DisplayMode özelliği Disabled olarak ayarlandığında denetimdeki metin rengi.DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill: DisplayMode özelliği Disabled olarak ayarlandığında denetimin arka plan rengi.DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill: denetimin arka plan rengi.Fill – The background color of a control.

Font: metnin görüntülendiği yazı tipi ailesinin adı.Font – The name of the family of fonts in which text appears.

FontWeight: denetimdeki metnin genişliği: Bold, Semibold, Normal veya Lighter.FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height: denetimin üst ve alt kenarları arasındaki uzaklık.Height – The distance between a control's top and bottom edges.

HoverBorderColor: kullanıcı, fare işaretçisini denetim üzerinde tuttuğunda görüntülenecek olan kenarlık rengi.HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor: kullanıcı, fare işaretçisini denetimdeki metin üzerinde tuttuğunda görüntülenecek olan metin rengi.HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill: kullanıcı, fare işaretçisini denetim üzerinde tuttuğunda görüntülenecek olan arka plan rengi.HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Italic: denetimdeki metnin italik olup olmadığı.Italic – Whether the text in a control is italic.

PaddingBottom: denetimdeki metin ile denetimin alt kenarı arasındaki uzaklık.PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft: denetimdeki metin ile denetimin sol kenarı arasındaki uzaklık.PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight: denetimdeki metin ile denetimin sağ kenarı arasındaki uzaklık.PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop: denetimdeki metin ile denetimin üst kenarı arasındaki uzaklık.PaddingTop – The distance between text in a control and the top edge of that control.

Pressed: Bir denetime basıldığında true, aksi halde false olur.PressedTrue while a control is being pressed, false otherwise.

PressedBorderColor: kullanıcı, denetime dokunduğunda veya tıkladığında görüntülenecek kenarlık rengi.PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor: kullanıcı, denetime dokunduğunda veya tıkladığında görüntülenecek metin rengi.PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill: kullanıcı, denetime dokunduğunda veya tıkladığında görüntülenecek arka plan rengi.PressedFill – The background color of a control when the user taps or clicks that control.

RadiusBottomLeft: denetimin sol alt köşesinin ne kadar yuvarlanacağı.RadiusBottomLeft – The degree to which the bottom-left corner of a control is rounded.

RadiusBottomRight: denetimin sağ alt köşesinin ne kadar yuvarlanacağı.RadiusBottomRight – The degree to which the bottom-right corner of a control is rounded.

RadiusTopLeft: denetimin sol üst köşesinin ne kadar yuvarlanacağı.RadiusTopLeft – The degree to which the top-left corner of a control is rounded.

RadiusTopRight: denetimin sağ üst köşesinin ne kadar yuvarlanacağı.RadiusTopRight – The degree to which the top-right corner of a control is rounded.

Size: denetimde görüntülenen metnin yazı tipi boyutu.Size – The font size of the text that appears on a control.

Strikethrough: denetimde görüntülenen metnin üstü çizili olup olmadığı.Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex: Sıfır olmayan bir değere ayarlandığında, çalışma zamanında denetimlerin sekme sırasını özelleştirir.TabIndex – Customizes the tab order of controls at runtime when set to a non-zero value.

Tooltip: kullanıcı bir denetimin üzerine geldiğinde görünen açıklama metni.Tooltip – Explanatory text that appears when the user hovers over a control.

Underline: denetimde görüntülenen metnin altı çizili olup olmadığı.Underline – Whether a line appears under the text that appears on a control.

VerticalAlign: denetimdeki metnin, denetimin dikey merkezine göre konumu.VerticalAlign – The location of text on a control in relation to the vertical center of that control.

Visible: denetimin gizli veya görünür olması.Visible – Whether a control appears or is hidden.

Width: denetimin sol ve sağ kenarları arasındaki uzaklık.Width – The distance between a control's left and right edges.

X: denetimin sol kenarı ile üst kapsayıcısının (üst kapsayıcı mevcut değilse ekranın) sol kenarı arasındaki uzaklık.X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y: denetimin üst kenarı ile üst kapsayıcının (üst kapsayıcı mevcut değilse ekranın) üst kenarı arasındaki uzaklık.Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Navigate( EkranAdı, EkranGeçişDeğeri )Navigate( ScreenName, ScreenTransitionValue )

ÖrneklerExamples

Düğmelere temel formüller eklemeAdd a basic formula to a button

  1. Bir Metin girişi denetimi ekleyin ve Source olarak adlandırın.Add a Text input control, and name it Source.

    Bir denetimi nasıl ekleyeceğinizi, adlandıracağınızı veya yapılandıracağınızı bilmiyor musunuz?Don't know how to add, name, and configure a control?

  2. Bir Düğme denetimi ekleyin, Text özelliğini "Add" olarak ve OnSelect özelliğini şu formül olarak ayarlayın:Add a Button control, set its Text property to "Add", and set its OnSelect property to this formula:
    UpdateContext({Total:Total + Value(Source.Text)}) UpdateContext({Total:Total + Value(Source.Text)})

    UpdateContext işlevi veya diğer işlevler hakkında daha fazla bilgi edinmek ister misiniz?Want more information about the UpdateContext function or other functions?

  3. Bir Etiket denetimi ekleyin, Text özelliğini Total olarak ayarlayın ve F5 tuşuna basın.Add a Label control, set its Text property to Total, and then press F5.
  4. Source'taki varsayılan metni temizleyin, bir sayı yazın ve ardından Ekle'ye tıklayın veya dokunun.Clear the default text from Source, type a number in it, and then click or tap Add.

    Etiket denetiminde, girmiş olduğunuz sayı gösterilir.The Label control shows the number that you typed.

  5. Source'taki sayıyı temizleyin ve ardından Ekle'ye tıklayın veya dokunun.Clear the number from Source, type another number in it, and then click or tap Add.

    Etiket denetiminde, girmiş olduğunuz iki sayının toplamı gösterilir.The Label control shows the sum of the two numbers that you typed.

  6. (isteğe bağlı) Önceki adımları bir veya birçok kez tekrarlayın.(optional) Repeat the previous step one or more times.
  7. Varsayılan çalışma alanına dönmek için Esc tuşuna basın. (Alternatif olarak, sağ üst köşedeki kapatma simgesine tıklayın ya da dokunun.)To return to the default workspace, press Esc (or click or tap the close icon in the upper-right corner).

Bir düğmeyi birden fazla formülle yapılandırmaConfigure a button with multiple formulas

Girişler arasındaki Metin girişi denetimini temizleyen bir formül ekleyin.Add a formula that clears the Text input control between entries.

  1. Source'un HintText özelliğini "Enter a number" olarak ayarlayın.Set the HintText property of Source to "Enter a number".
  2. Add'in OnSelect özelliğini şu formül olarak ayarlayın:Set the OnSelect property of Add to this formula:

    UpdateContext({Total:Total + Value(Source.Text)});
    UpdateContext({ClearInput: ""})
    UpdateContext({Total:Total + Value(Source.Text)});
    UpdateContext({ClearInput: ""})

    Not: Formülleri noktalı virgül ";" ile ayırın.Note: Separate multiple formulas with a semi-colon “;”.

  3. Source'un Default özelliğini ClearInput olarak ayarlayın.Set the Default property of Source to ClearInput.
  4. F5 tuşuna basın ve birlikte birçok sayı ekleyerek uygulamayı test edin.Press F5, and then test the app by adding several numbers together.

Toplamı sıfırlamak için başka bir düğme eklemeAdd another button to reset the total

Hesaplamalar arasındaki toplamı temizlemek için ikinci bir düğme ekleyin.Add a second button to clear the total between calculations.

  1. Başka bir Düğme denetimi ekleyin, Text özelliğini "Clear" olarak ve OnSelect özelliğini şu formül olarak ayarlayın:Add another Button control, set its Text property to "Clear", and set its OnSelect property to this formula:

    UpdateContext({Total:0})UpdateContext({Total:0})

  2. F5 tuşuna basın, birkaç sayı girin ve toplamı sıfırlamak için Clear'a tıklayın veya dokunun.Press F5, add several numbers together, and then click or tap Clear to reset the total.

Bir düğmenin görünümünü değiştirmeChange a button's appearance

Bir düğmenin şeklini değiştirmeChange a button's shape

Varsayılan olarak PowerApps, yuvarlak köşeli dikdörtgen bir Düğme denetimi oluşturur.By default, PowerApps creates a rectangular Button control with rounded corners. Height, Width ve Radius özelliklerini ayarlayarak bir Düğme denetiminin şeklinde temel değişiklikler yapabilirsiniz.You can make basic modifications to the shape of a Button control by setting its Height, Width, and Radius properties.

Not: Simgeler ve Şekiller çeşitli tasarım seçenekleri sunar ve Düğme denetimlerinin gerçekleştirebildiği temel işlevleri gerçekleştirebilir.Note: Icons and Shapes provide a wide variety of designs and can perform some of the same basic functions that Button controls do. Ancak, Simgeler ve Şekiller Text özelliğine sahip değildir.However, Icons and Shapes don’t have a Text property.

  1. Bir Düğme denetimi ekleyin ve büyük bir kare düğme elde etmek için Height ve Width özelliklerini 300 olarak ayarlayın.Add a Button control, and set its Height and Width properties to 300 to make a large square button.
  2. RadiusTopLeft, RadiusTopRight, RadiusBottomLeft ve RadiusBottomRight özelliklerini değiştirerek her bir köşedeki eğrilik miktarını ayarlayın.Modify the RadiusTopLeft, RadiusTopRight, RadiusBottomLeft, and RadiusBottomRight properties to adjust the amount of curvature on each corner. Aşağıda farklı şekillere ilişkin bazı örnekler bulabilirsiniz, bunların her biri için 300 x 300 kare düğme ile başlanmıştır:Here are some examples of different shapes, each one starting from a 300 x 300 square button:

Bir düğmenin üzerine geldiğinizde görüntülenen rengi değiştirmeChange a button's color when you hover over it

Varsayılan olarak Düğme denetiminin dolgu rengi, bir fare ile üzerine gelindiğinde %20 oranında soluklaşır.By default, the fill color of a Button control will dim by 20% when you hover over it with a mouse. ColorFade işlevini kullanan HoverFill özelliğini değiştirerek bu davranışı ayarlayabilirsiniz.You can adjust this behavior by changing the HoverFill property, which uses the ColorFade function. ColorFade formülünü pozitif bir yüzde değeri olarak ayarlarsanız düğmenin üzerine geldiğinizde renk daha açık, negatif bir yüzde değeri olarak ayarladığınızda ise daha koyu görünür.If you set the ColorFade formula to a positive percentage, the color becomes lighter when you hover over the button, while a negative percentage makes the color darker.

  • Oluşturduğunuz düğmelerden biri için HoverFill özelliğinin ColorFade yüzdesini değiştirin ve etkileri gözlemleyin.Change the ColorFade percentage in the HoverFill property of one of the buttons that you created, and observe the effects.

Ayrıca HoverFill özelliğini, ColorFade yerine ColorValue işlevini içeren bir formül olarak ayarlayıp (örneğin, ColorValue("Red")) Düğme denetiminin rengini de belirtebilirsiniz.You can also specify the color of a Button control by setting its HoverFill property to a formula that contains the ColorValue function instead of the ColorFade function, as in ColorValue("Red").

Not: Renk değeri herhangi bir CSS renk tanımı (ad veya onaltılık değer) olabilir.Note: The color value can be any CSS color definition, either a name or a hex value.

  • Oluşturduğunuz düğmede ColorFade işlevini bir ColorValue işlevi ile değiştirin ve etkileri gözlemleyin.Replace the ColorFade function with a ColorValue function in one of the buttons that you created, and observe the effects.