Export (0) Print
Expand All

Configure a control in Project Siena

 

In Project Siena, you can add a variety of controls that show data, gather data from users, and respond to user input. For each control, you can specify data, behavior, and design properties, which determine how a control looks, what happens when a user interacts with it or another control, and other characteristics.

  • For information about how to perform basic tasks, such as adding a control, see Create your first app with Project Siena.

    System_CAPS_importantImportant

    If you want to change a property but can't find it, click Express View in the lower-right corner to show a list of properties in each category. If the property you want still doesn't appear, click the down arrow under each category to display all properties in that category.

  • For a general overview of Project Siena and links to resources such as sample apps, video tutorials, and forums, see Project Siena.

Prerequisites

Before you can use some functions in this topic, you must install Project Siena after February 16, 2015.

You can configure an audio control to play a sound file in any format that Internet Explorer supports.

  1. Add an audio control, click the Data icon if it appears in the lower-left corner, and then click the Media icon.

  2. Click Add Media, browse for the sound file that you want to play, and then click Open.

    System_CAPS_noteNote

    If you can't find the folder that contains the file that you want to use, move or copy the file to the Music folder for the account with which you logged on.

  3. Click the play button (near the left side of the audio control).

    The file that you specified plays.

You can also use the audio control to play sounds that you record with a microphone control.

You can take pictures with the camera on your device and show them in an image gallery.

  1. Add a camera control, click Allow if you're prompted for permissions, and then name the control MyCamera.

    The camera shows live images of whatever it's pointed toward.

  2. Set the OnSelect property of MyCamera to this function:

    Collect(MyImages, {SinglePicture:MyCamera!Photo})

    Every time you click the camera, you'll take a picture and save it to a collection named MyImages.

  3. Add an Image gallery, expand it to show three items, and then set its Items property to MyImages.

  4. Press F5, and then click MyCamera multiple times.

    Each picture you take appears in the gallery.

  5. Press Esc to return to the design workspace, and set the OnSelect property of the first image in the gallery to this function, so that you can remove an image by clicking it:

    Remove(MyImages, ThisItem)

    System_CAPS_noteNote

    If you close the app, you'll lose the images that you've collected unless you save and load them.

You can create a pie, line, or column chart to display data graphically.

  • Add a column chart, and set its Items property to this function.

    Table({ProductType:"Violins", Revenue:Value(45000)}, {ProductType:"Trombones", Revenue:Value(39000)}, {ProductType:"Bongos", Revenue:Value(32000)})

    This function creates a temporary table that contains a ProductType column and a Revenue column. Each row identifies a type of product (violin, trombone, or bongo drum) and a revenue value for that product type.

  • To show how many times each voting button in Create your first app with Project Siena was clicked, add a pie chart to that app, and then set the Items property of that chart to this function:

    Table({VoteType:"Yes", VoteTotal:CountIf(Responses, "Yes" in Value)}, {VoteType:"No", VoteTotal:CountIf(Responses, "No" in Value)}, {VoteType:"Maybe", VoteTotal:CountIf(Responses, "Maybe" in Value)})

    This function creates a temporary table that contains a VoteType column and a VoteTotal column. The table contains a row for each vote type (yes, no, and maybe) and the total number of times that the button was clicked for that vote type.

For more examples, see Add a chart in Project Siena.

You can specify the value of another property based on whether a checkbox is selected or cleared. In this example, you'll change the text that appears in a label.

  1. Add a checkbox and a label, and name the checkbox MyCheckbox.

  2. (optional) Set the Text property of the checkbox to "I'm ready."

  3. Set the Text property of the label to this function:

    If(MyCheckbox!Value = true, "Let's go!", "I'll wait.")

  4. Press F5, and then select and clear the checkbox multiple times.

    The text of the label toggles between the two messages.

  5. (optional) Press Esc to return to the design workspace.

You can configure a dropdown list the same way as you configure a radio-button control.

For an example of how to add Coursera data, see Add data from an external source to Project Siena.

To transfer data to another Project Siena app, you first export the data into a compressed file. If the target app is on a different device, you then copy the file to that device. Finally, you add an import control to the target app and configure the control to add the data to a collection in that app.

  1. If you don't have a collection, create one.

    For information about how to create a collection, see Create your first app with Project Siena or Create and manage a collection in Project Siena.

  2. Add an Export control, set its Data property to the collection that you want to export, and then press F5.

  3. Click the Export control, specify where you want to save the file that contains your data, and then click Save.

    Your data is exported and compressed in a file in the location that you specified.

  4. (optional) Press Esc to return to the design workspace.

  1. Add a text gallery, and set its Items property to this function:

    Table({Item:"Violin123", Location:"France", Owner:"Fabrikam"}, {Item:"Violin456", Location:"Chile"})

  2. (optional) Set the Text properties of the labels in the gallery to these values:

    Heading1

    ThisItem!Item

    Subtitle1

    ThisItem!Owner

    Body1

    ThisItem!Location

For more examples, see Show data in a Project Siena gallery.

You can use this control to show text and render HTML codes (including links, images, and CSS styles) in an RSS feed or other sources. This control doesn't execute JavaScript and isn't a web-control or an iframe. You configure an HTML label the same way as you configure a label, as Create your first app with Project Siena describes.

You can show a single picture in an image control, or you can show a set of images in a gallery.

  1. Add an image control, click the Data icon if it appears in the lower-left corner, and then click the Image icon.

  2. Click Add Image, browse for the image file that you want to show, and then click Open.

    The image you specified appears in the control.

    System_CAPS_noteNote

    If you can't find the folder that contains the file that you want to use, move or copy the file to the Pictures folder for the account with which you logged on.

If you've exported data from another Project Siena app, you can import it into the current one by adding and configuring an import control.

  1. Add an import control, rename it MyImport, and then set its OnSelect property to a function that follows this syntax:

    Collect(CollectionName, MyImport!Data)

    CollectionName is the name of the collection into which you want to import the data.

  2. Press F5, and then click the control.

  3. Browse to the compressed file that contains your exported data, and then click Open.

  4. (optional) Press Esc to return to the design workspace, press Alt-D, and then click Collections in the left pane.

    The name of the collection that you created appears in the list in the middle pane, and a preview appears in the right pane if you click an entry in the list.

For an example, see the first section in Create and manage a collection in Project Siena.

You can choose multiple items in a listbox to determine properties of one or more other controls. For example, you can show or hide shapes, images, or other elements based on which items are chosen.

  1. Add a listbox, name it MyListBox, and then set its Items property to this function:

    Table({Shape:"circle"}, {Shape:"triangle"}, {Shape:"rectangle"})

  2. Open the list of controls, click Shapes, and then add a circle, a triangle, and a rectangle.

  3. (optional) Move the shapes so they appear in a row under the listbox.

  4. Set the Visible property of the circle to this function:

    If("circle" in MyListbox!SelectedItems!Value, true)

  5. Set the Visible property of the triangle to this function:

    If("triangle" in MyListbox!SelectedItems!Value, true)

  6. Set the Visible property of the rectangle to this function:

    If("rectangle" in MyListbox!SelectedItems!Value, true)

  7. Press F5, and then click one or more options in the listbox.

    Only the corresponding shape or shapes appear.

  8. (optional) Press Esc to return to the design workspace.

You can make a series of recordings and present them in a gallery.

  1. Add an input-text control, and name it Description.

  2. Add a microphone, click Allow if you're prompted for permissions, and then rename the control MyMicrophone.

  3. Set the OnStop property for the microphone to this function:

    Collect(Interviews, {Recordings:MyMicrophone!Audio, Notes:Description!Text})

    By using this function, you create a collection named Interviews, which contains a column named Recordings and a column named Notes. Each row will contain a sound file that you create by using the microphone and any text that the input-text control contains when you stop recording.

  4. Add a custom gallery, and then set its Items property to Interviews.

  5. Add an audio control to the first item in that gallery, and set the Media property for the audio control to ThisItem!Recordings.

    You can save visual space by shrinking the audio control so that only the play button appears.

  6. Add a label to the first item in that gallery, and set the Text property for the label to ThisItem!Notes.

  7. Press F5, type a phrase in the Description box, and then click MyMicrophone to start recording.

  8. When you finish recording, click MyMicrophone again to stop recording.

    Your description appears in the first item of the gallery, and your recording plays if you click the play button in the audio control.

  9. Type something else in the Description box, make another recording, and repeat as many times as you want.

    Each description and recording appears in the gallery.

  10. (optional) Press Esc to return to the design workspace.

    System_CAPS_noteNote

    If you close the app, you'll lose the recordings and descriptions that you've collected unless you save and load them.

You can automatically draft a message that summarizes the number of votes that were cast when you followed the steps in Create your first app with Project Siena.

  1. On the Results page, press Alt-V, click Office 365 Preview in the list that appears, and then click Send Message.

    Button to add composite control for sending email
  2. Move the new grouped control so it appears to the right of the existing controls.

    A composite control for sending messages through Office 365 Preview
  3. Select the top input-text control (for the recipient), click Data if it appears in the lower-left corner, and then set the Default property to the email address, surrounded by quotation marks, of the person or alias to which you want to send mail.

  4. Select the middle input-text control (for the subject line), and then set its Default property to this function:

    "Vote Results (as of " & Text(Now(), "dd-mmm, hh:mm am/pm") & ")"

  5. Select the bottom input-text control (for the message body), and then set its Default property to this function:

    Label1!Text & ", " & Label2!Text & ", " & Label3!Text & " (Next update: " & Text(DateAdd(Today(), 1), "dd-mmm") & ")"

    The template for the message that reports voting data
  6. Press F5, and then click Send.

    After a bit of time, the message appears in the inbox of the person or people to whom you addressed the message.

You can create multiple drawings (or simulate a whiteboard) and show the results in a gallery.

  1. Add a pen control, name it Sketches, and set its ShowControls property to true.

    You can access the ShowControls property by clicking Design if it appears near the bottom edge of the screen and then clicking Options.

  2. Add a button, set its Text Property to "Add" and set its OnSelect property to this function:

    Collect(Creativity, {Captures:Sketches!Image})

  3. Add an Image gallery, expand it to show three items, and then set its Items property to Creativity.

  4. Press F5, draw or write something with the pen control, and then click the button you added.

    The contents of the pen control appear in the first item of the gallery.

  5. Click the clear button (with the "x") for the pen control, write or draw something else in it, and then click the Add button again.

    The contents of the pen control appear in the second item of the gallery.

  6. (optional) Repeat the previous step as many times as you want, and then press Esc to return to the design workspace.

    System_CAPS_noteNote

    If you close the app, you'll lose the recordings and descriptions that you've collected unless you save and load them.

  7. (optional) Convert written text to typed text:

    1. Add a label, and set its Text property to Sketches!RecognizedText.

    2. Press F5, and then write a word in the pen control.

      The label shows the word as typed text.

Not only can you specify the choices that appear in a radio-button control, but you can also change the value of a property for another control, such as the fill color for a circle, based on which radio button is chosen.

  1. Add a radio-button control, name it Choices, and then set its Items property to this function:

    Table({Color:"red"}, {Color:"green"}, {Color:"blue"})

  2. Resize the control to show all options.

  3. Add a shape (such as a circle), and set its Fill property to this function:

    If(Choices!Selected!Value = "Red", RGBA(192, 0, 0, 1), Choices!Selected!Value = "Green", RGBA(0, 176, 80, 1), Choices!Selected!Value = "Blue", RGBA(0, 32, 96, 1))

    In this function, you specify different color values based on which radio button is chosen.

  4. Press F5, choose different radio buttons to change the color of the shape, and then press Esc to return to the design workspace.

You can configure the property of a control, such as label text, to change based on the rating that a user specifies.

  1. Add a rating control, and then name it MyRating.

  2. Add a label, and then set its Text property to this function:

    If(Rating1!Value > 3, "Thanks!", "Sorry!")

    If a user specifies four or five stars, the label shows Thanks!. Otherwise, the label shows Sorry!

  3. Press F5, test the function by setting the rating control to different values, and then press Esc to return to the design workspace.

By configuring a SharePoint Update control, you can gather data in Project Siena and share that information with others through a SharePoint list.

  1. Follow the steps in Create your first app with Project Siena.

  2. In SharePoint, create a list named ResponsesSP, create a column in that list named Value, and copy the URL for the list (in the address bar of your browser).

    A SharePoint list named ResponsesSP with a column named Value
  3. In Project Siena, press Alt-D, click SharePoint, and ensure that the appropriate option button is selected for the type of list you created.

  4. Paste the URL for the list into the text box, and then click Connect.

  5. If prompted, provide the requested credentials.

  6. In the list that appears, select the ResponsesSP check box, click Import data, and then press Esc to return to the design workspace.

    Result screen after SharePoint list is imported
  7. On the Vote page, change the OnSelect property of the Yes button to this function, and make equivalent changes to the other buttons:

    Collect(ResponsesSP, "Yes")

  8. On the Results page, change the Text property of Label1 to this function, and make equivalent changes to the other labels on the page:

    "Yes: " & CountIf(ResponsesSP, "Yes" in Value)

  9. On the Vote page, press Alt-V, scroll to the bottom of the list that appears, and then add a SharePoint Update control.

    Button to add a SharePoint Update control
  10. (optional) Move the control that you just added so it appears under the buttons already on the screen.

  11. Change the Data Source property of the SharePoint Update control to ResponsesSP.

  12. Press F5, click each voting button a random number of times, and then click the Update button.

    On the Results page of your app, each label shows the number of times you clicked the corresponding button.

  13. Open your SharePoint list in a browser, or refresh the view of that list. (In Internet Explorer, press F5.)

    The list contains a row for each time that you clicked a button, and each row shows which button you clicked.

    SharePoint list showing votes cast, by whom, and when

You can change the value of a property for another control, such as the fill color for a circle, based on a value that a user specifies by using a slider.

  1. Add a slider, and then name it MySlider.

  2. With the slider selected, click Data if it appears in the lower-left corner, and then set the Max property to 255.

  3. Press Alt-V, click the Shapes category, and then add a circle.

  4. With the circle selected, click Design if it appears near the bottom edge of the screen, and then set the Fill property to this function:

    RGBA(MySlider!Value, 0, 0, 1)

  5. Press F5, and then drag the thumb of the slider all the way to its right edge.

    The circle changes from black to red.

  6. Press Esc to return to the design workspace.

For examples of how to add data from Facebook, Twitter, and Instagram, see Add data from social media to a Project Siena app.

You can change the value of a property for a different control, such as the Text property of a label, based on how long a timer has been running.

  1. Add a button, and name it MyButton.

  2. Add a timer, name it MyTimer, and then set its Reset property to this function:

    MyButton!Pressed

  3. Add a label, and set its Text property to this function:

    If(Timer1!Value=0, "", Timer1!Value<3000, "Ready!", Timer1!Value>3000 && Timer1!Value<6000, "Set!", Timer1!Value>6000, "Go!")

  4. Press F5, and then click the timer.

    Nothing appears in the label before the timer starts. The label shows "Ready!" for the first three seconds, "Set!" for the next three seconds, and "Go!" after at least six seconds have passed.

  5. After all three messages have appeared, click MyButton to set the timer back to the start.

  6. (optional) Click the timer again to restart it.

  7. (optional) Press Esc to return to the design workspace.

You can configure a toggle the same way as you configure a check box.

You can use this control to play a video file in any format that Internet Explorer supports. For an example, see "Show a YouTube video" in Add data from social media to a Project Siena app.

For an example of how to add data from Bing, see Search the web and translate text in Project Siena. For an example of how to add data from YouTube, see Add data from social media to a Project Siena app.

Property

Description

AutoPause

Set to true if you want the timer, audio player, or video player to pause automatically when, for example, the user navigates to a different screen. Otherwise, set to false.

AutoStart

Set to true if you want the timer, audio player, or video player to start automatically if, for example, the user opens the screen that contains the control you're configuring. Otherwise, set to false.

Brightness

Specify the level of brightness in the image that appears in the camera.

Clear

Set to true if you want to clear all input from a pen control. Otherwise, set to false.

Contrast

Specify the level of contrast in the image that appears in the camera.

Data Source

Specify the list that you want to update when a user clicks a SharePoint Update control.

Default

Specify the default text that appears in an input-text control; the default value for a rating, slider, or toggle control; or the default option in a listbox or radio-button control. For a gallery, specify the item or items to show by default, as this forum post describes.

Duration

Specify how much time, in milliseconds, will elapse between when the timer starts and when it finishes if it isn't interrupted.

HTML Text

Specify the text that appears in an HTML label, including markup that you want the control to render.

Image

Specify the image that appears in an image control, an audio player, a video player, or a microphone.

Items

Specify the data that you want to show in a gallery, a listbox, or a dropdown list.

Loop

Set to true if you want the audio or video player to restart the clip automatically when the player finishes. Otherwise, set to false.

Max

Specify the maximum value to which a user can set a slider or a rating control.

Media

Specify the audio or video clip that you want a player to play.

Min

Specify the minimum value to which a user can set a slider.

ReadOnly

Set to true if you want a rating control to show a value but ignore user input.

Repeat

Set to true if you want a timer that finishes to automatically start again from zero.

Reset

Set to true if you want a timer to stop counting and return to zero.

Start

Set to true if you want a timer to start and false if you want it to stop.

StartTime

Specify how long, in seconds, from the start of a clip you want an audio or video player to start playing.

Text

Specify the text that appears in a label, next to a checkbox, or on a button, an export control, an import control, or a SharePoint Update control.

Tooltip

Specify the text that appears when a user hovers over a control. For example, you can display the percentage of an audio clip that has been played:


Concatenate(Text(Round(AudioPlayback1!Time/AudioPlayback1!Duration*100,1)), "% complete")

Zoom

Specify the default zoom for a camera.

Property

Description

OnChange

Specifies how your app responds when, for example, a user adjusts a slider, specifies a rating, or chooses an option in a listbox.

OnCheck

Specifies how your app responds when, for example, a user selects a checkbox.

OnEnd

Specifies what else changes in your app when an audio or video clip finishes playing.

OnPause

Specifies what else changes in your app when an audio or video clip is paused.

OnSelect

Specifies how your app responds when, for example, a user clicks a button, a label, an image, or any other control for which you've set this property.

OnStart

Specifies what else changes in your app when an audio or video clip starts to play or a microphone starts to record.

OnStop

Specifies what else changes in your app when a microphone stops recording.

OnTimerEnd

Specifies what else changes when a timer finishes running.

OnTimerStart

Specifies what else changes in your app when a timer starts to run.

OnUncheck

Specifies how your app responds when, for example, a user clears a check box.

Property

Description

Align

Specify Align!Left, Align!Center, Align!Right, or Align!Justified to change the alignment of text on a button or in a label, an input-text control, or another type of control.

Border Color

Specify RGBA values or click an option to change the color of the border around a control. For example, you can specify RGBA(192, 0, 0, 1) to make a border red.

Border Style

Specify BorderStyle!Solid, BorderStyle!Dashed, or BorderStyle!Dotted to change the style of the border around a control, or specify BorderStyle!None to remove the border. By default, this property is set to BorderStyle!None.

Border Thickness

Specify a number to change the thickness of a border around a control. For example, 10 gives you the thickest border, and 0 removes the border altogether. By default, this property is set to 0.

Camera

Specify the numeric ID of the camera you want to use. For example, 0 might indicate a camera on the front of a device, and 1 might indicate the camera on the rear of a device.

Checkbox Size

Specify a number that represents how large you want a checkbox to be. For example, 8 is the smallest, and 96 is the largest.

Clear

Specify true to show a small icon [x] that a user can click to remove all text from an input-text control, and specify false to hide the icon.

Color

Specify RGBA values or click an option to change the color of the text in a label, a button, or other control or the color of the input in a pen control. For example, you can specify RGBA(192, 0, 0, 1) to make the text or input red.

Direction

Specify Direction!Start to show the first item at the left edge of a horizontal gallery, or specify Direction!End to show the first item at the right edge of a horizontal gallery.

Disabled

Specify true to prevent users from interacting with a control. Otherwise, specify false.

Disabled Border Color

Specify RGBA values or click an option to change the color of the border around a control for which the Disabled property is set to true. For example, you can specify RGBA(255, 255, 255, 1) to make the border white.

Disabled Color

Specify RGBA values or click an option to change the color of the text in a control for which the Disabled property is set to true. For example, you can specify RGBA(255, 255, 255, 1) to make the text white.

Fill

Specify RGBA values or click an option to change the background color of a control. For example, you can specify RGBA(255, 255, 255, 1) to change the background of a toggle light green when the handle is on the right side or the bottom of the control.

Font

Specify the name of the font that you want to use for the text in a label, input-text control, listbox, or other control.

FontWeight

Specify FontWeight!Normal, FontWeight!Lighter, FontWeight!Semibold, or FontWeight!Bold to change the style of text on, for example, a button.

Handle Fill

Specify RGBA values or click an option to change the color of the element that you drag to change the value of a toggle. For example, you can specify RGBA(192, 0, 0, 1) to make the element red.

Height

Specify the number of pixels between the top of a control and the bottom of the same control. You can also resize a control by clicking it and then dragging a small square or triangle in the thick, gray selection box that appears.

Hint Text

Specify text that appears in an input-text control if the Default property of that control is an empty string. Hint text appears in gray and disappears as soon as the user clicks the control.

Hover Border Color

Specify RGBA values or click an option to change the color of the border for a control to which a user is pointing with a mouse, a trackpad, or a similar device. For example, you can specify RGBA(192, 0, 0, 1) to make the border red.

Hover Color

Specify RGBA values or click an option to change the color of the text in a control to which a user is pointing with a mouse, a trackpad, or a similar device. For example, you can specify RGBA(192, 0, 0, 1) to make the text red.

Hover Fill

Specify RGBA values or click an option to change the background color of a control to which a user is pointing with a mouse, a trackpad, or a similar device. For example, you can specify RGBA(192, 0, 0, 1) to make the background red.

Image Position

Specify one of these expressions to change how an image appears, for example, in an image control or as the background of a microphone control that doesn't have the same dimensions as the image you want to show:

  • ImagePosition!Fill changes the image's height and width proportionally so that the image reaches all four sides of the control while maintaining the original aspect ratio.

  • ImagePosition!Fit changes either the height of the image (so it reaches both the top and the bottom of the control) or the width of the image (so it reaches both the left and the right side of the control) while maintaining the original aspect ratio.

  • ImagePosition!Center shows the image with its original dimensions in the center of the control.

  • ImagePosition!Tile shows one or more instances of the image with its original dimensions so that the entire control is covered.

  • ImagePosition!Stretch changes the image's height and width to match the dimensions of the control.

Italic

Specify true to italicize the text in a label, input-text, button, or other control. Otherwise, specify false.

Layout

For a gallery, specify Layout!Horizontal to show the first item on the left side of a gallery and subsequent items in a row to the right. Specify Layout!Vertical to show the first item on the top of a gallery and subsequent items in a column toward the bottom. For a slider, specify Layout!Horizontal if you want users to adjust the value by dragging the thumb left or right, and specify Layout!Vertical if you want users to adjust the value by dragging the thumb up or down.

Line Height

Specify a number that represents the amount of space between, for example, lines in a label, items in a listbox, or lines in an input-text control for which the Mode property is set to Multiline.

Mic

Specify the numeric ID of the microphone you want to use. For example, 0 might indicate a microphone on the front of a device, and 1 might indicate the microphone on the rear of a device.

Mode

Specify Mode!SingleLine, Mode!Multiline, or Mode!Password to determine what kinds of data an input-text control accepts.

Navigation Step

Specify the number of gallery items that you want to scroll when you click the arrows that appear if Show Navigation is set to true. For example, specify 5 if your gallery shows five items at a time, and you want to show a different set every time a user clicks a navigation arrow.

Overflow

Specify Overflow!Scroll to show a vertical scrollbar when a label is too small to show all of the text it contains, or specify Overflow!Hidden to hide that scrollbar.

Padding Bottom

Specify a different value to change the distance between, for example, the text on a button and the bottom of the button. By default, text is centered vertically in a button. If you want that text to appear along the bottom of the button, set this property to 0, and change the Vertical Alignment property to Bottom.

Padding Left

Specify a different value to change the distance between, for example, the text on a button and the left edge of the button. By default, text is centered in a button. If you want that text to appear on the left edge of the button, set this property to 0, and change the Align property to Left.

Padding Right

Specify a different value to change the distance between, for example, the text on a button and the right edge of the button. By default, text is centered in a button. If you want that text to appear on the right edge of the button, set this property to 0, and change the Align property to Right.

Padding Top

Specify a different value to change the distance between, for example, the text on a button and the top of the button. By default, text is centered vertically in a button. If you want that text to appear along the top of the button, set this property to 0, and change the Vertical Alignment property to Top.

PenMode

Specify PenMode!Draw, PenMode!Erase, or PenMode!Select to determine what happens when a user drags a pointing device, such as a mouse, in a pen control.

Pressed Border Color

Specify RGBA values or click an option to change the border color of a control when a user clicks that control. For example, you can specify RGBA(192, 0, 0, 1) to set this property to red.

Pressed Color

Specify RGBA values or click an option to change the text color of a control when a user clicks that control. For example, you can specify RGBA(192, 0, 0, 1) to set this property to red.

Pressed Fill

Specify RGBA values or click an option to change the background color of a control when a user clicks that control. For example, you can specify RGBA(192, 0, 0, 1) to set this property to red.

Rail Fill

Specify RGBA values or click an option to change the color of the slider element on the right side of the thumb. (You drag the thumb to change the slider value.) For example, you can specify RGBA(192, 0, 0, 1) to set this property to red.

Radio Size

Specify a different value to change the size of the circles that you click to choose an item in a radio-button control.

Rating Fill

Specify RGBA values or click an option to change the color of the stars that indicate the value of a rating control. For example, you can specify RGBA(192, 0, 0, 1) to change the first four stars (counting from the left) red when the value of the control is four.

SelectionColor

For a listbox or dropdown control, specify RGBA values or click an option to change the text color of an item the user chooses. For a pen control, specify RGBA values or click an option to change the color of the selection line when the PenMode property is set to PenMode!Select. For example, you can specify RGBA(192, 0, 0, 1) to set this property to red.

SelectionFill

Specify RGBA values or click an option to change the fill color of an item chosen in a listbox or a dropdown control. For example, you can specify RGBA(192, 0, 0, 1) to set this property to red.

SelectionThickness

Specify a value to change the thickness of the selection line when the PenMode property of a pen control is set to PenMode!Select.

SelectMultiple

Specify true to allow users to choose more than one option at a time in a listbox, or specify false to allow only one option.

ShowControls

Specify true to display, for example, play, pause, and rewind controls for a video or audio player or draw, erase, and clear controls for a pen. Specify false to hide those controls.

ShowNavigation

Specify true to display arrows near the left and right edges of a horizontal gallery or the top and bottom edges of a vertical gallery. You can click these arrows to scroll through items in the gallery. Specify false to hide these arrows.

ShowValue

Specify true to display the value of a slider or a rating control as a user changes that value, and specify false to hide the value.

Size

Specify a different value to change the size of the text on, for example, a button.

Snap

Specify true to turn on snapping when a user scrolls through a gallery. For example, when a user clicks the arrow on the right side of a horizontal gallery, the item furthest to the left disappears completely, and the item immediately to its right appears on the left edge of that gallery. Specify false to turn this behavior off.

Strikethrough

Specify true to add a line through the horizontal center of text on, for example, a button, or specify false to remove such a line.

Template Fill

Specify RGBA values or click an option to change the color behind all controls in each item of a gallery. For example, you can specify RGBA(192, 0, 0, 1) to set this property to red.

Template Padding

Specify a different value to change the amount of space between items in a gallery.

Template Size

Specify a different value to change the amount of horizontal space (in a horizontal gallery) or the amount of vertical space (in a vertical gallery) that each item can occupy.

Thumb Fill

Specify RGBA values or click an option to change the fill color of the square that you drag to change the value of a slider. For example, you can specify RGBA(192, 0, 0, 1) to set this property to red.

ThumbSize

Specify a different value to change the size of the square that you drag to change the value of a slider.

ToggleFill

Specify RGBA values or click an option to change the fill color of the toggle when the handle is on the left side or top of the control. For example, you can specify RGBA(192, 0, 0, 1) to set this property to red.

Transition

Specify Transition!Push, Transition!Pop, or Transition!None to change or remove the visual effect when you point to an item in a gallery.

Transparency

Specify 0 to show an image in an image control, or specify any other value to hide the image.

Underline

Specify true to add a line under the text on, for example, a button, or specify false to remove such a line.

Value Fill

Specify RGBA values or click an option to change the color of the slider element on the left side of the thumb. (You drag the thumb to change the slider value.) For example, you can specify RGBA(192, 0, 0, 1) to set this property to red.

Vertical Align

Specify VerticalAlign!Top, VerticalAlign!Middle, or VerticalAlign!Bottom to change the placement of text, for example, on a button.

Visible

Specify true to show the control on a screen in your app, and specify false to hide the control.

Width

Specify a different number to change the distance, in pixels, between the left and right edges of a control.

X

Specify a different number to change the distance between the left edge of a screen and the left edge of a control on that screen.

Y

Specify a different number to change the distance between the top edge of a screen and the top edge of a control on that screen.

Was this page helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2015 Microsoft