Placing UI control leads to different results depending on the operating system. Below image shows an example for Windows 10:
In the case of Windows 7, I have no issues with it.
Xaml code for button and tab control (overlap):
<Button Grid.Column="1" Background="Transparent" Margin="0,0,18,0" HorizontalAlignment="Right" Height="30" Width="30" VerticalAlignment="Center" BorderBrush="Transparent" Click="Settings_Click" Style="{DynamicResource ButtonStyle1}" >
<Button.ToolTip >
<TextBlock Margin="-7,-5" Padding="7,5" Foreground="White" Text="{Binding Configuration}" TextWrapping="Wrap"></TextBlock>
</Button.ToolTip>
<Image Source="/Resources/017.png" ></Image>
</Button>
<ContentControl Content="{Binding Mode=OneWay}" DataContext="{Binding ActiveVM}" Margin="-1,49,1,1" Grid.RowSpan="2"/>
Had the same problem while moving my app from 7 to 10.
Have a look at this thread:
How to configure an app to run correctly on a machine with a high DPI setting (e.g. 150%)?
private static extern bool SetProcessDPIAware();
is what made my app look "normal" again.
Windows has this beautiful control FlipView.
When I want to add it to my xaml page, VS can find it source (I've checked, Windows library is included into project). So I found suggestion to create own class which will be inherited from FlipView class. After I did it, VS said it can't find definition of <FlipView.ItemTemplate>. So what I am doing wrong?
Code which I've used to test FlipView
<FlipView x:Name="flipView1" Width="480" Height="270"
BorderBrush="Black" BorderThickness="1">
<FlipView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Width="480" Height="270" Source="{Binding Image}" Stretch="UniformToFill"/>
<Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
<TextBlock Text="{Binding Name}" FontFamily="Segoe UI" FontSize="26.667"
Foreground="#CCFFFFFF" Padding="15,20"/>
</Border>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
FlipView is a Windows Store/Universal App only class.
The page you link to clearly states:
Requirements (Windows 10 device family)
Device family
Universal
and
Requirements (Windows 8.x and Windows Phone 8.x)
Minimum supported client
Windows 8 [Windows Store apps only]
If you want to have the same functionality in a WPF desktop application you will need to either find a third party control that does the same or write your own.
I was trying to use the settings flyout in phone 8.1 runtime to produce a settings screen for an app. However the compiler is throwing an error and I dont no why. This would have worked fine in phone 8.0 but not 8.1 runtime it seems.
<SettingsFlyout
x:Class="popcornpk.Settings"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:popcornpk"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
IconSource="Assets/SmallLogo.png"
Title="CustomSetting" >
<!-- This StackPanel acts as a root panel for vertical layout of the content sections -->
<StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<!-- Toggle switch -->
<StackPanel >
<TextBlock Text="Toggle Switch" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Margin="0,0,0,25" Text="Use toggle switches to let users set Boolean values." Style="{StaticResource BodyTextBlockStyle}"/>
<ToggleSwitch Margin="-6,0,0,0" Header = "Download updates automatically" HorizontalAlignment="Left" HorizontalContentAlignment="Left"/>
<ToggleSwitch Margin="-6,0,0,0" Header = "Install updates automatically" HorizontalAlignment="Stretch"/>
</StackPanel>
<!-- Button -->
<StackPanel >
<TextBlock Text="Push button" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Text="Button label" Style="{StaticResource BodyTextBlockStyle}"/>
<Button Margin="-3,0,0,0" Content="Clear"/>
<TextBlock Margin="0,0,0,25" Text="With a push button, users initiate an immediate action." Style="{StaticResource BodyTextBlockStyle}"/>
</StackPanel>
<!-- ComboBox -->
<StackPanel >
<TextBlock Text="ComboBox" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Margin="0,0,0,25" Text="Use the ComboBox to allow users to select one item from a set of text-only items." Style="{StaticResource BodyTextBlockStyle}"/>
<ComboBox Header="State:" Margin="0,7,0,0" SelectedIndex="0" HorizontalAlignment="Left">
<ComboBoxItem Content="Washington"/>
<ComboBoxItem Content="Oregon"/>
<ComboBoxItem Content="California"/>
</ComboBox>
</StackPanel>
<!-- HyperlinkButton -->
<StackPanel >
<TextBlock Text="Hyperlink" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Margin="0,0,0,25" Text="Use a hyperlink when the associated action will take the user out of this flyout." Style="{StaticResource BodyTextBlockStyle}"/>
<HyperlinkButton Padding="-5,0,0,0" Content="View privacy statement" Tag="http://privacy.microsoft.com" HorizontalAlignment="Left"/>
</StackPanel>
<!-- TextBox -->
<StackPanel >
<TextBlock Text="TextBox" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Margin="0,0,0,25" Text="Use a TextBox to allow users to enter text." Style="{StaticResource BodyTextBlockStyle}"/>
<StackPanel Margin="0,7,0,0" Orientation="Horizontal">
<TextBox HorizontalAlignment="Left" Width="150"/>
<Button Margin="20,0,0,0" Content="Add"/>
</StackPanel>
</StackPanel>
<!-- RadioButton -->
<StackPanel>
<TextBlock Text="Radio button group" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Margin="0,0,0,25" Text="Lets users choose one item from a small set of mutually exclusive, related options." Style="{StaticResource BodyTextBlockStyle}"/>
<TextBlock Text="Video quality" Style="{StaticResource BodyTextBlockStyle}"/>
<RadioButton Margin="0,7,0,0" Content="High"/>
<RadioButton Margin="0,17,0,0" Content="Medium"/>
<RadioButton Margin="0,17,0,0" Content="Low"/>
</StackPanel>
</StackPanel>
Severity Code Description Project File Line
Error CS0263 Partial declarations of 'Settings' must not specify different base classes popcornpk C:\Users\david\Documents\Visual Studio 2015\81StoreLiveAppsPhoneOnlyLIVE\popcornpk\popcornpkhub\popcornpk\popcornpk\obj\Debug\Settings.g.i.cs 15
My base class is just the same as other pages
Note 2
public partial class Settings : Page
I changed above to settings and it compiled but the flyount did not work or popup so it didnt any idea as to why it didnt.
Note 2
To Avoid confusion I dont want a base page of page I wanted to be able to use the settingsflyout that was part of 8.0 apparently microsoft have dicthced this though for 8.1 UAP
The exception tells you everything you need to know.
Look at your xaml. Here's the top two lines of your file:
<SettingsFlyout
x:Class="popcornpk.Settings"
This says that you're declaring a new class called popcornpk.Settings (btw, namespaces should be PascalCased) that extends the base class SettingsFlyout.
When you add a new xaml file to your application, it actually creates three files--the .xaml file, a .xaml.cs file that you edit, and a mysterious ephemeral .g.i.cs file that holds designer-generated code (e.g., the implementation of InitializeComponent()).
The .xaml.cs and .g.i.cs files are partial class files, and are combined by the compiler. Note what the exception message says--
Partial declarations of 'Settings' must not specify different base classes
What are these different base classes?
Well, from the xaml, we can see the first one--SettingsFlyout.
From your snippet,
public partial class Settings : Page
We see the other base class--Page.
Not sure how you screwed that up, but the simple fix is to remove the base class declaration from your .xaml.cs file:
public partial class Settings
{
// snip
Apart from what Will has said about partial classes, which will surely solve the error, you probably won't be able to use SettingsFlyout on Phone - following the remarks:
Caution SettingsFlyout is supported only for use with the SettingsPane in Windows 8. While the SettingsFlyout type is visible in Windows Phone projects, SettingsPane is not present on Windows Phone, so use of SettingsFlyout is not supported.
The case is really trivial: FontWeight's attribute for TextBlock does not work in Universal Store App. I have created sample project (Universal App), and in the WindowPhone's MainPage added TextBlock styled like that:
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize=20
FontWeight="Thin"
Text="Test text should be thin in runtime." />
In the designer everything looks fine, but when I deploy an app on a simulator/device, test text is not thinned! It's normal. Check out the screenshot:
As you can see, in the designer the text is perfectly thin (it's beautiful!). However in the running simulator text's weight is normal. Why's that? How can I workaround it? Thanks in advance for any help.
It works pretty well in WP8.0 Silverlight but in WP8.1 run time, you'll need to apply a <Style> to it as well. Like so
<Grid x:Name="ContentPanel">
<StackPanel>
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="20" Text="Test text should be normal in runtime."/>
<!-- apply the a style like BodyTextBlockStyle -->
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="20"
Text="Test text should be thin in runtime."
FontWeight="Thin" Style="{StaticResource BodyTextBlockStyle}"/>
</StackPanel>
</Grid>
I've removed some code for brevity, but my problem is that images are not loading from resource project at runtime in included controls. The xaml is in a different project than the images, but both are in the same solution and the xaml project has the resource project as a reference.
The image loads from Source="/ThinkVisual.Resources;component/Images/save.png"/ but inside <my:OwnerDetails x:Name="controlOwnerDetails" /> there is an image which does not load.
<Button x:Name="btnAddOwnerDetails" ToolTip="Add Owner/Management details" Click="btnAddOwnerDetails_Click">
<Image Width="16" Height="16" Source="/ThinkVisual.Resources;component/Images/add_button.png" />
</Button>
Both the parent and the child controls are in the same project and folder.
<lc:LayoutGroup x:Name="layoutCompanyDetails" Header="Company Details" View="GroupBox" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Orientation="Vertical" <lc:LayoutGroup x:Name="tabCompanyDetails" View="Tabs" SelectedTabChildChanged="tabCompanyDetails_SelectedTabChildChanged">
<lc:LayoutGroup Header="Details">
<my:CompanyDetails x:Name="controlCompanyDetails" />
</lc:LayoutGroup>
<lc:LayoutGroup Header="Owner/Management Details">
<my:OwnerDetails x:Name="controlOwnerDetails" />
</lc:LayoutGroup>
</lc:LayoutGroup>
<lc:LayoutItem>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button x:Name="btnUpdate" ToolTip="Update company details" Padding="0" Margin="0" Width="65" MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave" IsEnabled="{Binding Path=AllPropertiesValid}" Click="btnUpdate_Click">
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Width="16" Height="16" Source="/ThinkVisual.Resources;component/Images/save.png"/>
<Label x:Name="lblSaveButton" Padding="2">Update</Label>
</StackPanel>
</Button.Content>
</Button>
</StackPanel>
</lc:LayoutItem>
The images are visible in Visual Studio but not displayed during execution, project builds and runs without error.
You're using the wrong Pack URI
Make sure your Image in your custom control library is set to Resource Build Action and False for Copy to Output Directory.
Then change your Image.Source to:
<Image Width="16"
Height="16"
Source="pack//application:,,,/ThinkVisual.Resources;component/Images/add_button.png" />
Personally, I would put all the images used in XAML in the same project as the XAML to break the dependency. Image if someone took your assembly and wanted to reuse it. They would need to create a new project with the same naming convention and file names in order to use the assembly with it's intention.
If the image is used in both assemblies (projects), add the images to each assembly and use proper Pack Uri's.
So if you're using the image in a control defined in ThinkVisual.Administration then use
Source="pack//application:,,,/ThinkVisual.Adminstration;component/Images/add_button.png"
and if the control you're using in ThinkVisual.Resources uses the same image, then use the first snippet for Source.