I'm developing a new application in WinUi3 for Windows 11 but I'm having some doubts and difficulties (I've developed UWP apps and haven't had this problem, in WinUi3 the behavior seems to be different)
I have this example:
<StackPanel Name="Main" Orientation="Vertical">
<RelativePanel Background="{ThemeResource SystemControlAcrylicWindowBrush}">
<TextBlock Name="AAA"
Text="AAA"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignLeftWithPanel="True">
</RelativePanel>
<RelativePanel Background="{ThemeResource SystemControlAltHighAcrylicWindowBrush}">
<TextBlock Name="BBB"
Text="BBB"/>
</RelativePanel>
</StackPanel>
I want something like that in the new Paint:
Orange zone only for a simple textblock and some buttons (settings, about, etc.) and red zone to my "work zone" of my app.
I want to make this two sections. But my code in WinUI3 dont work like I want. What is the best way to do that?
Thank you!
Your "work zone" can be expanded using Grid.
<Grid Name="Main" RowDefinitions="Auto,*">
<!-- MENU BAR -->
<NavigationView
Grid.Row="0"
IsBackButtonVisible="Collapsed"
IsSettingsVisible="True"
PaneDisplayMode="Top">
<NavigationView.MenuItems>
<NavigationViewItem Content="Ficheiro" />
<NavigationViewItem Content="Editar" />
<NavigationViewItem Content="Ver" />
</NavigationView.MenuItems>
</NavigationView>
<!-- YOUR CONTENTS -->
<StackPanel
Grid.Row="1"
BorderBrush="Red"
BorderThickness="2">
<TextBlock Text="CONTENT #1" />
<TextBlock Text="CONTENT #2" />
</StackPanel>
</Grid>
And "Ta-da!"
Related
This is a bit of a tricky question to put succinctly but here goes. Snippets have been included to get the point across.
This problem came about whilst trying to solve another problem, to which a solution was found on SO, but which required to right-click and edit the default style of a TextBox, which I can't do because the TextBox in question is part of a DataTemplate on a databound ListView which of course has no content at design time.
Here are some snippets: I use a data template to control the content/layout of my listview like so:
<ListView x:Name="DataItemList"
ItemsSource="{x:Bind MasterMenuItem.DataObjects, Mode=OneWay}"
SelectedItem="{x:Bind SelectedItem, Mode=TwoWay}"
SelectionMode="Single"
ItemTemplate="{StaticResource DataListItemTemplate}">
</ListView>
and a data template as a page/control resource
<DataTemplate x:Key="DataListItemTemplate" x:DataType="vm:DataObjectListItem">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Grid Height="40" Margin="10 0 0 0">
<Grid.Resources>
<SolidColorBrush x:Key="brush" Color="Silver"/>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="*" MinWidth="240" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderBrush="{StaticResource brush}" BorderThickness="1 1 1 1">
<FontIcon Name="Icon"
Grid.Column="0"
VerticalAlignment="Center"
FontSize="32"
Glyph="{x:Bind ListItemIcon}" />
</Border>
<Border Grid.Column="1" BorderBrush="{StaticResource brush}" BorderThickness="1 1 1 1">
<TextBlock Name="Data Object Name"
Padding="6 4 6 4"
Text="{x:Bind Name, Mode=OneWay}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
FontWeight="Bold"
TextWrapping="WrapWholeWords"/>
</Border>
</StackPanel>
</DataTemplate>
When I view my page in the Design tab of visual studio (instead of the XAML tab) I see nothing useful, unlike if, for example, I put a TextBlock in my XAML with Text="Hello" I would be able to see 'Hello' in the Design tab and crucially Right-Click on it to do certain things...
Is there a way to 'populate' the list with some dummy data, or the text box with some dummy text in order to visualize the runtime layout in the Design tab?
I want to place my Flyoutat the Bottom of my Page.
So i created it like this.
<Grid x:Name="ExampleRoot">
<Grid HorizontalAlignment="Center"
VerticalAlignment="Top">
<Image Source="{Binding Path=CurrentPage}"
Stretch="Uniform" ContinuumNavigationTransitionInfo.IsEntranceElement="True"
/>
</Grid>
<FlyoutBase.AttachedFlyout>
<PickerFlyout Placement="Bottom" > <!-- Here I set my Placement --->
<StackPanel>
<TextBlock Style="{ThemeResource TitleTextBlockStyle}" Text="{Binding Path=DocumentPageCounterDescription, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBlock Style="{ThemeResource TitleTextBlockStyle}" Text="{Binding Path=SelectedAnnotation.Description, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" TextWrapping="Wrap" />
</StackPanel>
</PickerFlyout>
</FlyoutBase.AttachedFlyout>
</Grid>
and open it like this in the code behind
private void SomePropertyChanged(DependencyPropertyChangedEventArgs e)
{
ViewModel selected = e.NewValue as ViewModel;
FlyoutBase fly = FlyoutBase.GetAttachedFlyout(this.LayoutRoot);
fly.ShowAt(this.LayoutRoot);
}
But it opens every time at the top of my page. I can set it to FlyoutPlacementMode.Full for example and it is working the expected way.
I attached it at the complete page and tried it, but the result is the same. So how do I get it to open at the bottom of my Page?
//// Edit
I found the following answer, but this is not working for me! I dont want to open it from a button!
It is working with a MenuFlyout the way I want to, but i want to have a PickerFlyout.
There is descripted that other placements not working on Flyouts. Any Ideas ?
Unfortunately, Windows Phone RT apps only support the flyout in Full or Top placement which you've already established. It is possible to do what you're asking however.
This article might be of use to you: Flyout on Windows Phone 8.1 Runtime
All right I solved it!
I want to show Text / information in it so a MenuFlyout was no option for me. The PickerFlyout isn't modifiable enought so i took the common one.
As I mentioned there is no working placement with a Flyout at the Bottom except with a MenuFlyout.
So here is what I did.
<FlyoutBase.AttachedFlyout>
<Flyout Placement="Full">
<StackPanel Background="{ThemeResource FlyoutBackgroundThemeBrush}" >
<StackPanel Margin="5,0">
<TextBlock Style="{ThemeResource TitleTextBlockStyle}" Text="Some Title Example" />
<TextBlock Style="{ThemeResource TitleTextBlockStyle}" Text="Some Information Example" TextWrapping="Wrap" />
</StackPanel>
</StackPanel>
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="Background" Value="Transparent" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</Flyout.FlyoutPresenterStyle>
</Flyout>
</FlyoutBase.AttachedFlyout>
</Grid>
I set the PlacementMode to Full and applied an invisible Background. Only the the outer Stackpanel is now showing a background. This way it feels like the real PlacementMode.Bottom.
I've just started using the Expensify Windows Phone Test Framework and it seems to fit my requirements for automated testing of Windows Phone 7.1 quite well. I can get it to trigger a normal button on the screen but cannot get it to trigger either of my ApplicationBar buttons.
The XAML for this test page is ...
<phone:PhoneApplicationPage x:Class="SampleApp1.MainPage"
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"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:AppBarUtils="clr-namespace:AppBarUtils;assembly=AppBarUtils"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"
Orientation="Portrait"
mc:Ignorable="d"
d:DesignWidth="480"
d:DesignHeight="768"
shell:SystemTray.IsVisible="True"
DataContext="{Binding Main, Source={StaticResource Locator}}">
<!--LayoutRoot contains the root grid where all other page content is placed-->
<Grid x:Name="LayoutRoot"
Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel"
Grid.Row="0"
Margin="24,24,0,12">
<TextBlock x:Name="ApplicationTitle"
Text="{Binding ApplicationTitle}"
Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="PageTitle"
Text="{Binding PageName}"
Margin="-3,-8,0,0"
Style="{StaticResource PhoneTextTitle2Style}" />
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentGrid"
Grid.Row="1">
<StackPanel Margin="24,20,0,123" Orientation="Vertical">
<TextBlock Text="{Binding Welcome, Mode=OneWay}"
Style="{StaticResource PhoneTextNormalStyle}"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="6,0,19,0" TextWrapping="Wrap" Width="431" />
<TextBlock Text="Enter first number"
HorizontalAlignment="Left" VerticalAlignment="Top"
Margin="6,20,0,0" TextWrapping="Wrap" />
<TextBox TextChanged="OnTextBoxTextChanged"
Text="{Binding EnteredAmount1, Mode=TwoWay, UpdateSourceTrigger=Explicit}"
x:Name="txtValue1"
HorizontalAlignment="Left" Height="72" VerticalAlignment="Top" Width="456"
TextWrapping="Wrap" InputScope="Number"/>
<TextBlock Text="Enter second number"
HorizontalAlignment="Left" VerticalAlignment="Top"
Margin="6,0,0,0" TextWrapping="Wrap" />
<TextBox TextChanged="OnTextBoxTextChanged"
Text="{Binding EnteredAmount2, Mode=TwoWay, UpdateSourceTrigger=Explicit}"
x:Name="txtValue2"
HorizontalAlignment="Left" Height="72" VerticalAlignment="Top" Width="456"
TextWrapping="Wrap" InputScope="Number"/>
<TextBlock Text="Result"
HorizontalAlignment="Left" VerticalAlignment="Top"
Margin="6,20,0,0" TextWrapping="Wrap"/>
<TextBlock Text="{Binding Total, Mode=OneWay}"
HorizontalAlignment="Left" VerticalAlignment="Top"
Margin="15,0,0,0" TextWrapping="Wrap"
Width="422" Height="45"/>
<Button x:Name="btnAdd" Command="{Binding AddCommand}" Content="Add" Margin="240,0,0,0" />
</StackPanel>
</Grid>
</Grid>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="False">
<shell:ApplicationBarIconButton x:Name="AddAppBarBtn" IconUri="/Images/ApplicationBar.Check.png" Text="add"></shell:ApplicationBarIconButton>
<shell:ApplicationBarIconButton x:Name="SubtractAppBarBtn" IconUri="/Images/ApplicationBar.Cancel.png" Text="subtract"></shell:ApplicationBarIconButton>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
<i:Interaction.Behaviors>
<AppBarUtils:AppBarItemCommand Id="add" Command="{Binding AddCommand}"/>
<AppBarUtils:AppBarItemCommand Id="subtract" Command="{Binding SubtractCommand}"/>
</i:Interaction.Behaviors>
<i:Interaction.Triggers>
<AppBarUtils:AppBarItemTrigger Type="Button" Id="add" Text="add" />
<AppBarUtils:AppBarItemTrigger Type="Button" Id="subtract" Text="subtract" />
</i:Interaction.Triggers>
</phone:PhoneApplicationPage>
The SpecFlow features are defined as follows ...
Scenario: AppBar Add Two Numbers
Given my app is uninstalled
And my app is installed
And my app is running within 20 seconds
Then I enter "34" into the control "txtValue1"
Then I enter "23" into the control "txtValue2"
Then I press the control "AddAppBarBtn"
Scenario: Button Add Two Numbers
Given my app is uninstalled
And my app is installed
And my app is running within 20 seconds
Then I enter "34" into the control "txtValue1"
Then I enter "23" into the control "txtValue2"
Then I press the control "btnAdd"
The ButtonAddTwoNumbers scenario fully works. The AppBarAddTwoNumbers fills in the text box values but refuses to press the button, The error I get is "Failed to set focus to control 'AddAppBarBtn'".
Any help on this would be appreciated.
I think you are working one level too high. Personally I wouldn't normally test the UI itself as in the long term it just leads to brittle tests that constantly need changing. Instead I would normally come down to the ViewModels.
So given that your txtValue1 is bound to EnteredAmount1, txtValue2 is EnteredAmount2 and AddAppBarBtn is AddCommand, you can test your business logic as
Scenario: AppBar Add Two Numbers
Given I enter 34 into Amount1
And I enter 23 into Amount2
When I add them #Calls AddCommand
Then Total should be 57
This means that you can redesign your UI very easily, so say for example if we wanted to use sliders instead of textboxes, there would be NO changes to the above logic tests.
In addition you can still test your UI features as seperate features
Scenario: Check startup
Given my app is uninstalled
When my app is installed
Then my app should be running within 20 seconds
And if you really want you can still check your bindings too
Scenario: Check bindings
Given I enter 34 into Amount1
Then control txtValue1 should be 34
In this way you'll break your tests into smaller chunks of the application and give yourself more targetted failures, which is really useful when tracking down any problems.
I recently switched to Visual Studio 2012 from VS2010.
I have some user controls which are templates for other user controls.
The first ones have some ContentControl whose content is defined in the second ones.
Follows the definition of a user control based on a template control (ImpegniBaseView)
<localView:ImpegniBaseView>
<localView:ImpegniBaseView.ActionButtons>
<StackPanel Height="54" HorizontalAlignment="Left" VerticalAlignment="Top" Width="668" Orientation="Horizontal">
<Button Content="Salva" Height="31" Width="88" Command="{Binding Path=SaveCommand}" IsEnabled="{Binding Editable}" Margin="5,0" />
<Button Command="{Binding Path=CreateCommand}" Content="Nuovo impegno master" Height="31" Width="Auto"
Visibility="{Binding IsFirstLevelView, Converter={StaticResource BoolToVisibility}}"
IsEnabled="{Binding Path=Editable, Converter={StaticResource InverseBooleanConverter}}" Margin="5,0" />
</StackPanel>
</localView:ImpegniBaseView.ActionButtons>
</localView:ImpegniBaseView>
In Vs 2010 I could easily select, for example, the button 'Salva' in the designer. Now I cannot. I suppose I have to change an option in the designer, but I don't know which one...
Update
Follows the relevant part of the user control used as template
<UserControl x:Class="Ragioneria.View.ImpegniBaseView"
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"
xmlns:local="clr-namespace:Ragioneria"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="700">
<DockPanel DataContext="{Binding ImpegnoSelezionato}">
<DockPanel DockPanel.Dock="Top">
<StackPanel Orientation="Horizontal" DockPanel.Dock="Left">
<Label Content="Anno/Num-Sub" Height="28" HorizontalAlignment="Left" Margin="5" Name="label1" VerticalAlignment="Top" Width="Auto" />
<ContentControl Content="{Binding Path=IdentificazioneImpegnoSection, RelativeSource={RelativeSource AncestorType=UserControl}}" Width="400" Height="28" Margin="5" />
</StackPanel>
<TextBox Height="28" Width="100" Name="textBox9" Text="{Binding Path=DataRegistrazione, StringFormat=d}" DockPanel.Dock="Right" Style="{DynamicResource tb_readonly}" TextAlignment="Right" Margin="5" />
<Label Content="Data" Height="28" Margin="5" Name="label7" Width="50" DockPanel.Dock="Right"/>
</DockPanel>
<ContentControl DockPanel.Dock="Bottom"
DataContext="{Binding DataContext.ActiveWorkspace, RelativeSource={RelativeSource AncestorType=Window}}"
Content="{Binding Path=ActionButtons, RelativeSource={RelativeSource AncestorType=UserControl}}" />
</DockPanel>
Thanks
Filippo
You must add [AlternateContentProperty] to ActionButtons.
Unfortunately, unlike in Silverlight, you won't find this attribute in standard library.
Instead, you will need to use Microsoft.Windows.Design.PropertyEditing.AlternateContentProperty from Microsoft.Windows.Design.Interaction.dll.
Since this is a non-redistributable dll from Visual Studio, you can't reference it directly and have to create designer metadata assembly.
See this bug
and vote here.
I'm interested in creating my own 'Hub' Panorama. I've gotten the 'wide' PanoramaItem working, but I'm trying now to mimic the behavior seen in the Marketplace hub, where the PanoramaItem Header scrolls as you move across the hub.
I'm looking for a way for it to smoothly animate to the end of the hub. Has anyone tried this before, or have any suggestions?
I'd imagine it would be something like this:
//OnPanoramaViewChanged
//get X location of viewport
//animate title to X location
However it doesn't appear that the Panorama has a ScrollViewer attached property.
In case you're curious, here's how I made a wide panorama item.
<controls:PanoramaItem ScrollViewer.HorizontalScrollBarVisibility="Visible" Header="movies" Orientation="Horizontal" Width="900">
<controls:PanoramaItem.HeaderTemplate >
<DataTemplate >
<StackPanel>
<TextBlock Foreground="{StaticResource PanoramaHeaderBrush}" Text="{Binding}">
</TextBlock>
</StackPanel>
</DataTemplate>
</controls:PanoramaItem.HeaderTemplate>
<StackPanel>
<!-- line list with image placeholder and text wrapping -->
<ListBox ItemsSource="{Binding Items}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10">
<Grid Background="{StaticResource ControlTitlesInactivePivotBrush}" Width="173" Height="173" >
<TextBlock FontSize="24" Text="Movie Title (2010)" TextWrapping="Wrap" Style="{StaticResource PhoneTextGroupHeaderStyle}"/>
<Rectangle Fill="White" Height="48" Width="48" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<Rectangle.OpacityMask>
<ImageBrush ImageSource="/Test;component/movie_icn.png" />
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
<TextBlock Text="Movie Title:" Margin="12,0,12,0" Foreground="Black" />
<TextBlock Text="The Title" Margin="12,-6,12,0" Foreground="Gray"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</controls:PanoramaItem>
The Silverlight Panorama control doens't support the behaviour you're after or provide the ability to customize it in a way that will let you do it.
If you really want this then you'll need to build your own control from scratch. I would expect this to be more effort than is justified. Just avoid creating a very wide PanoramaItem instead.