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
Related
I have written the user control below and I want to display a clock image on the button control. The image has BuildAction set to Resource. It shows up perfect in the XAML design screen, but when I run the application the button is blank. What am I doing wrong?
<UserControl x:Class="App_Process_Admin.User_Controls.TimePicker"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="30" d:DesignWidth="150">
<UserControl.Resources>
<ResourceDictionary>
<Image x:Key="ClockImage" Source="Icons/Clock.png"/>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="180" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Name="TimeField" Text="" />
<Button Grid.Row="0" Grid.Column="1" Content="{StaticResource ClockImage}" Click="SetTime_Click" />
<local:ClockPopUp x:Name="ClockPopUp1" Grid.Row="1" Grid.Column="0" Visibility="Hidden"></local:ClockPopUp>
</Grid>
</UserControl>
I had the same problem, i resolve it this way (in visual studio 2019, wpf application) :
put your images in your project in a folder
Create an image in xaml and put your source
At this point for me the images are displayed in the design window but not at the runetime
Access to your image in your project with the solution explorer
Select each image and open the property window
Set "Generation action" to "Resource" and "Copy in the repository" To "always copy"
I have done that and i can see my images at runtime :)
PS : sorry for my english, i'm french
Image is a control. If you add it to resources his way, it'll only be displayed in the last place it's added to and will disappear from all previous places. You can fix this by adding x:Shared=False:
<Image x:Key="ClockImage" x:Shared="False" Source="Icons/Clock.png"/>
This way, a new Image control will be created every time it's requested.
Alternatively, you can create a button style with Image in its ContentTemplate and add BitmapImage to the resources directly:
<BitmapImage x:Key="Bitmap" UriSource="Icons/Clock.png"/>
<Style x:Key="ButtonImage" TargetType="Button">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Image Source="{TemplateBinding Content}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Now you can create buttons with images this way:
<Button Content="{StaticResource Bitmap}" Style="{StaticResource ButtonImage}"/>
Image controls will be created by the framework based on the template.
In my case, it was needed to first add the images into project, by drag-and-drop'ing them into the folder where your .xaml is in solution explorer.
Then, i added to .xaml:
<Window.Resources>
<BitmapImage x:Key="Icon" UriSource="Images/Image.png"/>
</Window.Resources>
<Button x:Name="SomeButton" Background="Gray">
<Image Source="{StaticResource Icon}"/>
</Button>
And that's it.
Also, if you have complicated project with many folders, you can use ../ in UriSource to go up a folder from the current, where .xaml file is located
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;
When I run my Windows Phone 8 app on the 8.1 1080 emulator, there's a black bottom margin on all its pages (interestingly, it actually doesn't appear when I'm viewing any of these pages in the Design view).
Initially, I thought it may be as a result of my custom laid-out PhoneApplicationPage. So, I decided to create a new PhoneApplicationPage and not make any changes i.e. Visual Studio's auto-generated Portrait PhoneApplicationPage. This is its xaml:
<phone:PhoneApplicationPage
x:Class="App.Views._1080p"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Red">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,0">
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
</Grid>
</Grid>
The only change I've made is add a red Background property for the Grid just to better highlight the problem.
I've not made any changes to the code-behind.
Unfortunately, the problem persisted:
If I add an App Bar to the xaml, the problem becomes exacerbated.
This is the App Bar's xaml:
<!-- APP BAR -->
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar
x:Name="appBar"
IsVisible="True"
IsMenuEnabled="True"
Mode="Default"
Opacity="1" >
<!-- APP BAR ICONS -->
<shell:ApplicationBarIconButton
IconUri="a"
Text="Search"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
And this is what it looks like:
Any idea what's going on? And what I need to change to fix this problem? Any guidance would be much appreciated. I should add the problem does happen when running the app on a 1080p device too (i.e. not only a problem on the emulator).
Here is the explanation: on Windows Phone 8.1, the ApplicationBar's height is not fixed anymore, it depends on the device screen size. In order to not break existing 8.0 apps layouts, they added that black bar.
The height of this black bar is 12px (height of the 8.0 AppBar - 8.1 AppBar).
To remove it, you'll have to migrate the app to Windows Phone 8.1.
I am Using silverlight4 I have developed one page when I navigate to this page from Other Silverlight Page the Position is at the bottom of the page .I need to set the Focus on top of the silverlight Page.I am not using ScrollViewer on my Page.
Open MainPage.xaml file and replace the code with the following.
<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="ScrollViewerControl.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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<ScrollViewer Height="300" Width="300" Name="scrollViewer1"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto">
<ScrollViewer.Content>
<StackPanel>
' Content Here
</StackPanel>
</ScrollViewer.Content>
</ScrollViewer>
</Grid>
</UserControl>
set the ScollViewer offset to zero like
scrollViewer1.ScrollToVerticalOffset(0);
then your vertical scroll will always be on Top.
In one of my apps I have a usercontrol called FeedControl (yep, it's yet another RSS reader!) which is very simple - just a checkbox to select the item, a textblock to show the feed name and another textblock to show the number of unread feed items. On loading the feeds into an observable collection at startup I then create one instance of the control for each feed and add them all to a listbox - pretty simple stuff really.
XAML code is below:
<UserControl x:Class="MyReader.FeedControl"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
Loaded="UserControl_Loaded" >
<Grid x:Name="LayoutRoot" Height="50" Background="Black" HorizontalAlignment="Left" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="70"/>
</Grid.ColumnDefinitions>
<CheckBox Name="Select" Grid.Column="0" IsChecked="{Binding IsSelected}" Margin="-5,-16" Checked="Select_Checked" Background="White"/>
<TextBlock Name="FeedName" Grid.Column="1" Text="{Binding FeedName}" Opacity="1" Margin="-20" VerticalAlignment="Center" FontSize="24"
MouseLeftButtonUp="FeedName_MouseLeftButtonUp" Height="32" Width="360"/>
<TextBlock Name="UnreadItems" Grid.Column="2" Text="{Binding UnreadItems}" Opacity="1" Padding="2" VerticalAlignment="Center" HorizontalAlignment="Right"
FontSize="24" MouseLeftButtonUp="FeedName_MouseLeftButtonUp" />
</Grid>
When the orientation changes of the page the listbox of Feedcontrol items is on I want the feed name textblock to change to the correct size (560px for landscape, 360px for portrait) so I assumed by setting the grid column width to "*" or "Auto" and setting no width for the textblock it would automatically resize but it only resizes to the width of it's text and not the full width.
So then I tried setting the textblock to the default portrait size (360) in the XAML and on the page orientation change event I call the following Method in each instance of the FeedControl currently in the ListBox:
public void ChangeOrientation(bool isLandscape)
{
if (isLandscape)
{
this.LayoutRoot.Width = App.LandscapeWidth; //700
this.FeedName.Width = App.LandscapeItemWidth; //560
}
else
{
this.LayoutRoot.Width = App.PortraitWidth; //480
this.FeedName.Width = App.PortraitItemWidth; //360
}
this.InvalidateArrange();
this.InvalidateMeasure();
}
However, this doesn't work either (no matter what I try) so I am confused about how best to do this... I know there must be a really simple way but so far I've not found it.
Can anybody point me in the right direction please?
Mike
PS sorry for the length of the post... so long for such a simple problem!!
You should set the HorizontalAlignment and HorizontalContentAlignment to HorizontalAlignment.Stretchfor the ListBoxItems which have your control. In addition, set the design width/design height of your control.
Here's an example of one of my controls I have in a listbox, that stretches in landscape mode.
<UserControl x:Class="SabWatch.Resources.Controls.ProgressBox"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480">
<Grid x:Name="LayoutRoot" Style="{StaticResource AppBackgroundStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
</Grid>
</UserControl>
And here's an example of setting the alignment properties in code. you can also do this in XAML (and possibly using a style and giving the ListBox a ItemContainerStyle)
var lbi = new ListBoxItem();
var box = new ProgressBox();
...
lbi.Tag = queueObject;
lbi.Content = box;
lbi.HorizontalAlignment = HorizontalAlignment.Stretch;
lbi.HorizontalContentAlignment = HorizontalAlignment.Stretch;
Where u are placing this control, that you are not mentioned . I think u are placing this control inside a Phone page ; like placing any other control. If so better u manage orientation related stuffs in that page( Container page ) instead of making adjustment in the control. I Think this will solve your issue.