Why am I getting a XamlParseException here? - xaml

With this XAML:
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button Style="{StaticResource BrowsePhotosAppBarButtonStyle}" Click="btnOpenImgFiles_Click"/>
<Button Style="{StaticResource OpenAppBarButtonStyle}" Click="btnOpenMap_Click"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Style="{StaticResource SaveAppBarButtonStyle}" Click="btnSaveMap_Click"/>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
(which I adapted from markup I found online) I got a "Windows.UI.Xaml.Markup.XamlParseException"
Looking at this, I figured it should be AppBarButton instead of Button, so I changed them to that...but I'm still getting the same err msg. Is it because there's no such thing as "BrowsePhotosAppBarButtonStyle" (I can't find a list of valid values for that) or...???

Yes. It's probably the button styles which are based on legacy Windows 8 code. If you're targeting Windows 8.1 then you should use AppBarButtons rather than Buttons. I'd also put them in a CommandBar rather than layout out your own Grid in an AppBar.
If BrowsePhotosAppBarButtonStyle isn't specific to the sample you got that from it is probably available in the StandardStyles.xaml file included with Windows 8 templates. That file included a large number of commented out button styles for you to uncomment as needed.
Here's how you'd set this up in a Windows 8.1 app. For simplicity I didn't hook up the Click handlers, and you may want to update the Label and Automation names:
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
<CommandBar>
<CommandBar.SecondaryCommands>
<AppBarButton Icon="BrowsePhotos" Label="Browse" AutomationProperties.Name="Browse Photos" />
</CommandBar.SecondaryCommands>
<CommandBar.PrimaryCommands>
<AppBarButton Icon="OpenFile" Label="Open" AutomationProperties.Name="Open File"/>
<AppBarButton Icon="Save" Label="Save" AutomationProperties.Name="Save File"/>
</CommandBar.PrimaryCommands>
</CommandBar>
</AppBar>
</Page.BottomAppBar>
See Adding app bars (XAML) for more details.

Related

UWP - CommandBar blank space under Buttons

This code generates a blank space, a misalignment and a misposition as you can see in the image.
<CommandBar Grid.Row="1" IsOpen="True" VerticalAlignment="Stretch">
<AppBarButton Icon="Add" Label="Nuovo" MinHeight="40" />
</CommandBar>
You can see the blank space, the add icon is too high, the Label is misplaced (more space from the icon is needed).
It seems that bottom gap can be eliminated rather easily by defining some heights in Application.Resources.
App.xaml
<Application.Resources>
<x:Double x:Key="AppBarThemeMinHeight">56</x:Double>
<x:Double x:Key="AppBarThemeCompactHeight">40</x:Double>
</Application.Resources>
MainPage.xaml
<Page.BottomAppBar>
<CommandBar>
<CommandBar.PrimaryCommands>
<AppBarButton Label="New" >
<AppBarButton.Icon>
<FontIcon Glyph="" FontSize="16"/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="Select">
<AppBarButton.Icon>
<FontIcon Glyph="" FontSize="16"/>
</AppBarButton.Icon>
</AppBarButton>
</CommandBar.PrimaryCommands>
</CommandBar>
</Page.BottomAppBar>
Fine Alignment (Optional)
AppBarButton (and/or AppBarToggleButton)
To adjust icon position of each button, put a copy of the default AppBarButton style in Application.Resources and alter Margin of ContentePresenter(Name="Content").
<ContentPresenter x:Name="Content" Margin="0,10,0,3" ... />
CommandBar
To adjust ellipsis button's position, similarly make a copy of CommandBar style and alter Padding of Button(Name="MoreButton").
<Button x:Name="MoreButton" Padding="16,17,16,0" ... />
Then,
All the explation here-in-above are based on the default styles defined in generic.xaml ver 10.0.14393.
CommandBar is designed to be used in Page.TopAppBar or Page.BottomAppBar. So if you just want to to show it at bottom of the page, put it in Page.BottomAppBar plainly. Then it will work without any problems.
<Page.BottomAppBar>
<CommandBar IsOpen="True">
<AppBarButton Icon="Add" Label="Nuovo"/>
</CommandBar>
</Page.BottomAppBar>
Or otherwise, if you'd like to manage to use it in the Grid inside Page.Content customizing height or other behaviors, you have to redesign entire Style for CommandBar including Template and Animations, since some important properties are hard-coded in the default Style.

How to manually scroll using ItemsRepeater

I'm using ItemsRepeater. And using a ScrollViewer to scroll left/right.
For some reason, I have to disable ScrollViewer' HorizontalScrollMode, and add Left/Right Button to manual scroll.
The xaml is
<Grid>
<muxc:ItemsRepeaterScrollHost Margin="12" Loaded="ItemsRepeaterScrollHost_Loaded">
<ScrollViewer
x:Name="sss"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollMode="Disabled"
HorizontalScrollMode="Disabled">
<muxc:ItemsRepeater
x:Name="HorizontalRepeater"
ItemsSource="{x:Bind product}"
ItemTemplate="{StaticResource HorizontalTemplate}">
<muxc:ItemsRepeater.Layout>
<muxc:StackLayout Orientation="Horizontal" Spacing="12"/>
</muxc:ItemsRepeater.Layout>
</muxc:ItemsRepeater>
</ScrollViewer>
</muxc:ItemsRepeaterScrollHost>
<Button
x:Name="ButtonLeft"
Tapped="ButtonLeft_Tapped">
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" FontSize="18" />
</Button>
<Button x:Name="ButtonRight"
Tapped="ButtonRight_Tapped">
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" FontSize="18" />
</Button>
</Grid>
Then I use
sss.ChangeView(step, null, null);
Nothing happens.
Why, thx.
How to manually scroll using ItemsRepeater
For my testing, ChangeView can't works for ItemsRepeater, Please try replace it with ScrollToHorizontalOffset or ScrollToVerticalOffset method.
Update
After update OS to latest version (1909) ChangeView works well, It may be a issue within previous version.

How do I create a two column layout using xaml RelativePanel?

I'd really like to use RelativePanel in a UWP app I'm writing, to simplify visual state.
This is what I want
I've tried to achieve this with the following XAML:
<RelativePanel>
<TextBlock x:Name="Title" Height="50" Margin="15" FontSize="24"
RelativePanel.AlignTopWithPanel="True"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True">
</TextBlock>
<TextBox x:Name="Editor" Margin="15" Padding="20" HorizontalAlignment="Stretch"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.Below="Title"
RelativePanel.RightOf="FileList">
</TextBox>
<ListView x:Name="FileList" HorizontalAlignment="Stretch" Margin="15"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.Below="Title">
</ListView>
</RelativePanel>
This isn't working. Editor does not stretch. If I set Editor to RelativePanel.AlignRightWith="FilesList", it stretches past files list and fills the window.
Is there any way to do what I want with RelativePanel? Please don't post suggestions on how to do this in Grid, I can already do that - I want to use RelativePanel in this case
Your Editor control should have -
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.Below="Title"
RelativePanel.LeftOf="FileList"
RelativePanel.AlignBottomWithPanel="True"
Note it should be LeftOf, not RightOf. You will also need AlignBottomWithPanel set to True.

Add text on MediaElement fullscreen

I'd like to add text on WindowsPhone 8.1 MediaElement fullscreen mode, but I cannot get it visible.
Here is my code:
<Grid>
<MediaElement Name="MyMedia" IsFullWindow="True" MarkerReached="MyMedia_MarkerReached"/>
<TextBlock x:Name="MediaTitles" Text="Hello World" HorizontalAlignment="Left" Margin="55,240,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="99" Width="270" FontSize="48" />
</Grid>
Any ideas what I'm doing wrong?
The property IsFullWindow="True" is causing the problem. As you might know by now. If I want the media element full screen I usually add it to the grid and span across 1 for column and row. Something like below:
<MediaElement
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="1"
Grid.ColumnSpan="1" />
This gives the same effect as full screen on the device. And you can see your Hello world text in the Designer.

MenuFlyout changes page colors (bug?)

My environment is: Visual Studio 2013 on Windows 8.1 using C++/CX and XAML.
I have a very simple MenuFlyout attached to a button that has a very odd behavior. You can click it once then selected a MenuFlyoutItem, however if you click it a second time it inverts all the colors on the page (such as the background turns white, which was black).
<Button HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Top" Height="55" Width="434" FontSize="25">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding DataContext.EmployeeList[0].PayFrequency, Mode=TwoWay}" Foreground="White"/>
<Button.Flyout>
<MenuFlyout Placement="Top">
<MenuFlyoutItem x:Name="WeeklyOption" Text="Weekly" Click="WeeklyOption_Click"/>
<MenuFlyoutItem x:Name="BiWeeklyOption" Text="Bi-Weekly" Click="BiWeeklyOption_Click"/>
<MenuFlyoutItem x:Name="MonthlyOption" Text="Monthly" Click="MonthlyOption_Click"/>
<MenuFlyoutItem x:Name="BiMonthlyOption" Text="Bi-Monthly" Click="BiMonthlyOption_Click"/>
</MenuFlyout>
</Button.Flyout>
</Button>
as far as I can tell I'm not messing with any Styles or any colors anywhere.