How to add image and keep text on PivotItem - xaml

This question shows how to substitute PivotItem headers text with images, but I wish to have both (plus, the text should be a variable).
The goal is to replicate the following Navigation model:
(source: s-msft.com)
Is it possible to adapt this simple XAML to achieve both text and image? If not, how to do it?
<Page
x:Class="Lenny.Windows.Views.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="using:Lenny.Windows.Views"
mc:Ignorable="d">
<Page.BottomAppBar>
<CommandBar>
<CommandBar.Content>
<Grid/>
</CommandBar.Content>
<AppBarButton Icon="Accept" Label="appbarbutton"/>
<AppBarButton Icon="Cancel" Label="appbarbutton"/>
</CommandBar>
</Page.BottomAppBar>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Pivot>
<Pivot.HeaderTemplate>
<DataTemplate>
<Image Source="{Binding}"></Image>
</DataTemplate>
</Pivot.HeaderTemplate>
<PivotItem Header="/Assets/LockScreenLogo.scale-200.png" >
<Grid />
</PivotItem>
<PivotItem Header="/Assets/LockScreenLogo.scale-200.png">
<Grid/>
</PivotItem>
<PivotItem Header="/Assets/LockScreenLogo.scale-200.png">
<Grid/>
</PivotItem>
</Pivot>
</Grid>
</Page>

If you are using MVVM you can use a property from your ViewModel and add a textblock in the header template to make a binding with this property and you can change this value from your ViewModel.
I said this because you need the text needs to be variable.
If you are not using MVVM pattern you need to use the Binding Approach
https://msdn.microsoft.com/en-us/library/windows/apps/mt269383.aspx
in xaml you need to add a stackpanel with orientation = horizontal and add your text and your image inside all of them in your header template

Related

Page background in frame not working

I have main page:
<Page >
<Grid>
<SplitView PaneBackground="Transparent" x:Name="mySplitView" DisplayMode="Overlay" IsPaneOpen="{Binding IsOpenMenu, Mode=TwoWay}" OpenPaneLength="320">
<SplitView.Pane>
...
</SplitView.Pane>
<SplitView.Content>
<Grid>
<Frame x:Name="frame"
Margin="0,0,0,0">
<Frame.ContentTransitions>
<TransitionCollection>
<NavigationThemeTransition>
<NavigationThemeTransition.DefaultNavigationTransitionInfo>
<EntranceNavigationTransitionInfo/>
</NavigationThemeTransition.DefaultNavigationTransitionInfo>
</NavigationThemeTransition>
</TransitionCollection>
</Frame.ContentTransitions>
</Frame>
</Grid>
</SplitView.Content>
</SplitView>
</Grid>
</Page>
In Frame i load other page. Example Page1.
In Page1 set background:
<Page Background="Red" >
</Page>
And this not working? Background is not Red. Why?
Your second Page needs content. Try this:
<Page Background="Red">
<Grid/>
</Page>
Typically for Pages and UserControls, you would actually set the Background of the content root element instead of the element itself:
<Page>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
</Grid>
</Page>
EDIT
I ran the app in the mobile emulator instead of the local machine and can reproduce your issue. All I can suggest is that you set the background on the content root element instead of the page, as I mentioned above.

Customize Windows Phone 8.1 message dialog

I want to customize my message dialog as shown in following figure
How do I perform that I have prepared xaml for this
<StackPanel Name="rootStackPanel" Height="Auto" Background="#363636" VerticalAlignment="Top">
<StackPanel Margin="10">
<StackPanel Margin="0,0,0,10" Orientation="Horizontal">
<TextBlock x:Name="HeadingText" x:FieldModifier="public" Style="{StaticResource ApplicationMessageBoxHeadingStyle}" Text="Alert" />
<Image Margin="10,05,0,0" Source="/Assets/Images/alert.png" Width="35"></Image>
</StackPanel>
<TextBlock x:FieldModifier="public" x:Name="ContentText" Style="{StaticResource ApplicationMessageBoxErrorStyle}" Text="Pease enter a valid plate number" />
<Button x:FieldModifier="public" Name="OkButton" Margin="0,20,0,0" Padding="0" HorizontalAlignment="Left" Content="Ok" Style="{StaticResource ApplicationThemeButtonStyle}"/>
</StackPanel>
</StackPanel>
The exact look you have there is non-standard, and if you want that exact thing you'll need to write some custom code. If the important part is the icon in the alert title then this is pretty easy with a ContentDialog.
The MessageDialog isn't customizable, but the ContentDialog is. There is a template to add a new ContentDialog to your project with the Add.New Item... menu.
Once you have your ContentDialog files you can customize the template to title its button "OK":
<ContentDialog
x:Class="MyApp.AlertDialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="Alert"
PrimaryButtonText="OK"
PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
>
And include your alert.png along with the Title in the title template. A more advanced version would allow binding different icons for different purposes.You could also fill a path instead of drawing a png so the icon will scale more easily.
<ContentDialog.TitleTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}" Foreground="{ThemeResource PhoneAccentBrush}"/>
<Image Source="/Assets/Images/alert.png" />
</StackPanel>
</DataTemplate>
</ContentDialog.TitleTemplate>
And then include the rest of the contents in the ContentDialog's Xaml:
<StackPanel>
<TextBlock x:FieldModifier="public" x:Name="ContentText" Style="{StaticResource ApplicationMessageBoxErrorStyle}" Text="Pease enter a valid plate number" />
</StackPanel>
This will put the OK button in its standardized location at the bottom right. If you want to include it with the text you can stick it in your StackPanel like in your sample code and not set the PrimaryButtonText on the ContentDialog.
Create a Usercontrol in the project.
Put the entire xaml code in the Usercontrol.
Now you can use this Usercontrol as a popup wherever you want to use it.
Popup msgpopup = new Popup( );
msgpopup.child = new CustomisedMessageDialogControl(); //name of ur Usercontrol
And to open this Dialog simply,
msgpopup.IsOpen = true;

ContentDialog's buttons are not shown in a Windows Phone 8.1 app if the BottomAppBar is defined

I would like to show a ContentDialog on first launch of my app, to show the EULA to the end user.
It seems that if an AppBar is defined in the calling page the two buttons in the dialog are not visible, an empty area with the same size of the command bar area defined in the calling page, is shown instead.
This is the markup on the ContentDialog:
<ContentDialog
x:Class="MyApp.EulaPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp.Pages"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="TERMS OF USE"
PrimaryButtonText="i agree"
SecondaryButtonText="cancel"
PrimaryButtonClick="OnAgreeButtonClick"
SecondaryButtonClick="OnCancelButtonClick">
<Grid x:Name="ContentPanel" Margin="0,0,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="524" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" Margin="0,0,0,2" >
<RichTextBlock IsTextSelectionEnabled="False" TextAlignment="Left" TextIndent="0" FontSize="14" FontFamily="Segoe WP" >
</RichTextBlock>
</ScrollViewer>
</Grid>
The GridRowDefinition has a fixed hight, because the text in the RichTextBlock needs to be scrolled.
I have prepared a sample project that can be found here. The zip file contains also a screenshot showing how I see the dialog.
I had the same problem and I have solved it by modifying/removing Height/Width and Margins of the Contentdialog

Adding A Background Image In XAML

I am very new to XAML code, but I want to try and code a personal program. I have started with XAML but anything I add does not show up. Here is my code:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Content="Home" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="7,725,0,0" Height="36" Width="91" BorderBrush="Orange" Foreground="Orange" FontFamily="BankGothic Md Bt"/>
<Image HorizontalAlignment="Left" Height="768" VerticalAlignment="Top" Width="1366" Source="C:/Users/Flynn/Desktop/BG.gif" Visibility="Visible"/>
</Grid>
</Page>
The button nor the image is showing up when I run the program. Can someone point me in the right direction? Thanks for your help!
To set a background to a grid, just keep your image in Images folder and add this code inside grid
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="..\Images\background.jpg" AlignmentY="Top" AlignmentX="Center"/>
</Grid.Background>
Please try this code.It works
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Button Content="Home" HorizontalAlignment="Left" VerticalAlignment="Top" Height="36" Width="91" BorderBrush="Orange" Foreground="Orange" FontFamily="BankGothic Md Bt"/>
<Image Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" Source="Images/super.jpg"/>
</Grid>
You should define the background property like this
You must add in to App.xaml (for color resource)
<Application.Resources>
<SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="BlueViolet"/>
</Application.Resources>
Image source have to be in your solution (application)

silverlight vertical progressbar

I can not figure out what I did wrong. I have a Usercontrol that has a vertical progressbar and under it a label.
<UserControl x:Class="IFramedInBrowser.Code"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Height="150" Width="15">
<Grid Width="120" Height="15" >
<StackPanel Width="120" Height="15" >
<ProgressBar Grid.Row="0" Value="{Binding Path=Percent}" Maximum="100" Width="120" Height="15" />
</StackPanel>
<TextBlock Grid.Row="1" Height="30" HorizontalAlignment="Left" Name="textBlock1" Text="{Binding Path=Symbol.Name}" VerticalAlignment="Top" >
<TextBlock.RenderTransform>
<RotateTransform Angle="90"/>
</TextBlock.RenderTransform>
</TextBlock>
<Grid.RenderTransform>
<RotateTransform Angle="-90"/>
</Grid.RenderTransform>
</Grid>
</UserControl>
This usercontrol is then used in a ItemsControl
<ItemsControl x:Name="HorizontalListBox"
ItemsSource="{Binding Source={StaticResource MyViewModel}, Path=List}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Center" Height="150"
>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<my:Code DataContext="{Binding}">
</my:Code>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
It should look like a piano keybord at the end...
After the rotation transformation the progressbar is chopped... What did I dowrong? How to fix this?
You can try to add different background colors to all controls to find out sizes of controls.
Also SilverlightSpy is now free for read only and you can go through the real visual tree at runtime.
Anyway, I would suggest to change the orientation of ProgressBar by customizing its template.
This is a clipping issue. You are setting too many heights and widths everywhere and it's confusing to know which one is in control of dimensions. Also, the stacking in the ListBox works on the layout and the RotateTransform is only effective on the final visual pass, so it's rotating a clipped progress bar.
You should follow jumbo's advice and create a vertical progress bar by modifying the template, not by rotation.
If you don't want to create the template, then you need to remove the main Grid you have in the UserControl and use a Canvas instead. Canvases don't clip. They let your elements float freely, which is probably what you want.