Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Most AppBar buttons are based on a style included in StandardStyles called AppBarButtonStyle. </p> <p>To customize the text of the button you set the <strong>AutomationProperties.Name</strong> attached property, to customize the icon in the button you set the <em>Content</em> property, and it's also a good idea to set the <strong>AutomationProperties.AutomationId</strong> attached property for accessibility reasons. </p> <p>Here's an example of a button customized using this approach:</p> <pre><code>&lt;Style x:Key="FolderButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}"&gt; &lt;Setter Property="AutomationProperties.AutomationId" Value="FolderAppBarButton"/&gt; &lt;Setter Property="AutomationProperties.Name" Value="Folder"/&gt; &lt;Setter Property="Content" Value="&amp;#xE188;"/&gt; &lt;/Style&gt; </code></pre> <p>As mentioned above, to customize the icon you set the <strong>Content</strong> property. The challenge is how you set the content so it displays your custom vector art.</p> <p>It turns out you can place any path Xaml, even yours, into a <strong>Viewbox</strong> to change its scale. That was my first approach, but it doesn't work. In fact, it seems any time you use Xaml expanded notation to set the <strong>Content</strong> property for a button it doesn't work.</p> <pre><code>&lt;Style x:Key="SquareButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}"&gt; &lt;Setter Property="AutomationProperties.AutomationId" Value="SquareAppBarButton"/&gt; &lt;Setter Property="AutomationProperties.Name" Value="Square"/&gt; &lt;Setter Property="Content"&gt; &lt;Setter.Value&gt; &lt;!-- This square will never show --&gt; &lt;Rectangle Fill="Blue" Width="20" Height="20" /&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; </code></pre> <p></p> <p>I actually think this is a bug, but luckily there is a workaround.</p> <p>Tim Heuer wrote an <em>excellent</em> article on the simplest way to use a Xaml <strong>Path</strong> as the artwork for a button. That article is here:</p> <p><a href="http://timheuer.com/blog/archive/2012/09/03/using-vectors-as-appbar-button-icons.aspx" rel="nofollow">http://timheuer.com/blog/archive/2012/09/03/using-vectors-as-appbar-button-icons.aspx</a></p> <p>In short, you need to define a style that sets up all the bindings correctly:</p> <pre><code>&lt;Style x:Key="PathAppBarButtonStyle" BasedOn="{StaticResource AppBarButtonStyle}" TargetType="ButtonBase"&gt; &lt;Setter Property="ContentTemplate"&gt; &lt;Setter.Value&gt; &lt;DataTemplate&gt; &lt;Path Width="20" Height="20" Stretch="Uniform" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}" Data="{Binding Path=Content, RelativeSource={RelativeSource Mode=TemplatedParent}}"/&gt; &lt;/DataTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; </code></pre> <p></p> <p>Then you create a style that inherits from that style and you paste in your path. Here is the style for your artwork you listed above:</p> <pre><code>&lt;Style x:Key="CrossButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource PathAppBarButtonStyle}"&gt; &lt;Setter Property="AutomationProperties.AutomationId" Value="CrossAppBarButton"/&gt; &lt;Setter Property="AutomationProperties.Name" Value="Cross"/&gt; &lt;Setter Property="Content" Value="M372.58272,134.72445C167.96301,134.72445 2.06820310000001,300.58818 2.06820310000001,505.20789 2.06820310000001,709.8276 167.96301,875.72241 372.58272,875.72241 577.20243,875.72241 743.06616,709.8276 743.06616,505.20789 743.06616,300.58818 577.20243,134.72445 372.58272,134.72445z M280.73888,251.77484L455.94149,251.77484 455.94149,413.70594 628.16035,413.70594 628.16035,588.97071 455.94149,588.97071 455.94149,773.71514 280.73888,773.71514 280.73888,588.97071 106.22005,588.97071 106.22005,413.70594 280.73888,413.70594 280.73888,251.77484z"/&gt; &lt;/Style&gt; </code></pre> <p>And finally, you use it in your AppBar like this:</p> <pre><code>&lt;Button Style="{StaticResource CrossButtonStyle}" /&gt; </code></pre> <p>Dev support, design support and more awesome goodness on the way: <a href="http://bit.ly/winappsupport" rel="nofollow">http://bit.ly/winappsupport</a></p>
    singulars
    1. This table or related slice is empty.
    1. POHow to use xaml vector images as image source in Windows 8 app
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USJared Bienz - MSFT
    1. USJared Bienz - MSFT
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow to use xaml vector images as image source in Windows 8 app
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COThanks once again Jared. You are always there to remind me how awesome XAML can be. Also, how little I understand. I need to spend less time in JVS and more time with XAML.
      singulars
      1. PO
      1. USChris Gonzales
    2. COWow, from the OP question I never knew it had anything to do with buttons in the first place haha
      singulars
      1. PO
      1. USChris W.
    3. COlol, Good point Chris W! I guess I made an assumption because he said "Icons" and icons are usually used in buttons (especially AppBar buttons). But the same DataTemplate trick could be applied anywhere. Usually you see people using a Viewbox to scale paths, but my gut tells me that Viewbox is expensive. The trick Tim Heuer shows looks to be much lighter weight. Thanks for being on SO and helping answer questions Chris W., I appreciate it. And Chris G., definitely apply some of those mad skills you have to Win 8. :) People I know are already making good money!
      singulars
      1. PO
      1. USJared Bienz - MSFT
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload