I tried to create a modal UserControl because the ContentDialog control is difficult to modify.
How to change background overlay of ContentDialog uwp
The title zone will be on the content zone(like a ContentDialog) but the background should be the same as the owerlay content.
What i try to do
How should i do to create this modal UserControl?
EDIT:
Thanks for your answer!
Actualy i have my control
<UserControl x:Class="TestModal.ModalView">
<Grid Background="Black" Opacity="0.5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="test"/>
</Grid>
</UserControl>
A main page :
Xaml
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Click="Show_Click" />
</Grid>
</Page>
C#:
private void Show_Click(object sender, RoutedEventArgs e)
{
ModalView myModalView = new ModalView();
Content = myModalView;
}
But how can i activate the user control? change content is not what i want to do.
You can easily create a control with an Grid for instance overlaying the complete UI. Give that grid for instance a black color with opacity 0.6 so you can see the underlying UI. Then just fill the Grid with controls you want to show. On events like 'click outside of the data area' (silent dismiss) or clicking a button ('close' or 'save' for instance) you can hide the UI again. And this can be packaged in a UserControl that can be used on other Pages.
If this is an answer to your question, please mark this as answer.
Related
I'm developing a UI with the WPF framework and MVVM.
This is the grid while loading:
image of the grid while displaying
This is the UI after the rendering has finished:
image of the grid when rendering is finished
So, as an example, the 3rd column isn't active and will collapse. But the user can see the whole building off the UI in the mainwindow.
Every view I've got is depending on the viewmodel. But also the controls got their own viewmodel. When I take my information together in one control, WPF is getting the information and draws the whole control, for example my tablecontrol. It´s a selfmade control, that is taking data and displays the data in a grid. Because it's one control, the whole grid is loaded in the background and displayed at once. When I make my own grid, because my tablecontrol can't handle the data, every control in the grid is displayed one after one and the grid is slowly displayed on the mainwindow.
<Grid HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
.
.
.
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
.
.
.
</Grid.RowDefinitions>
<unitControls:Label Grid.Row="1" Grid.Column="0" Text="{Binding xx}"/>
<unitControls:Label Grid.Row="1" Grid.Column="1" Text="{Binding xx}"/>
<unitControls:Label Grid.Row="1" Grid.Column="2" Text="{Binding xx}"/>
.
.
.
<unitControls:Label Grid.Row="7" Grid.Column="7" Text="{Binding xx}"/>
<unitControls:Label Grid.Row="7" Grid.Column="8" Text="{Binding xx}"/>
<unitControls:Label Grid.Row="7" Grid.Column="9" Text="{Binding xx}"/>
<Grid>
Is there a way to display the whole content in one view at once? I tried to manipulate the dispatcher in the viewmodel, but nothing helped.
Try something like this:
XAML
<Window x:Class="Example.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<DockPanel>
<Button Content="Collect data" Click="OnCollectData" DockPanel.Dock="Top"/>
<ContentControl x:Name="HostControl"/>
</DockPanel>
</Window>
CS
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private async void OnCollectData(object sender, RoutedEventArgs e)
{
var data = await CollectDataAsync();
HostControl.Content = new MyCustomGridControl(data);
}
private async Task<GridDataHolder> CollectDataAsync()
{
GridDataHolder result = null;
await Task.Run(() =>
{
// Collect the logical data on the thread pool
result = GetGridData();
});
return result;
}
}
You can put the HostControl with a ProgressBar in a Grid and play with the Visibility property of the ProgressBar to improve the user experience.
I'm trying to add a button to the title bar. My XAML looks like the following:
<Page
x:Class="FullScreen.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FullScreen"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="TitleBar">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Application Name" VerticalAlignment="Center"/>
<Button Grid.Column="1" Content="Test" Click="Button_Click"/>
</Grid>
</Grid>
<Grid Grid.Row="1">
<TextBlock>Content</TextBlock>
</Grid>
</Grid>
</Page>
The .cs page has this code:
using System;
using Windows.ApplicationModel.Core;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace FullScreen
{
public sealed partial class MainPage : Page
{
public MainPage()
{
InitializeComponent();
CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
Window.Current.SetTitleBar(TitleBar);
}
private async void Button_Click(object sender, RoutedEventArgs e)
{
await new MessageDialog("Click!").ShowAsync();
}
}
}
The button shows up but it doesn't respond to the click event. If I comment out the two lines in the constructor:
public MainPage()
{
InitializeComponent();
//CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
//Window.Current.SetTitleBar(TitleBar);
}
The button is in the main body of the app and the click event works correctly. What am I missing?
Thanx,
I'm trying to add a button to the title bar. The button shows up but it doesn't respond to the click event.
According to the official documentation(Remarks part of Window.SetTitleBar), this behavior is by design.
Input
When you call this method to set a XAML UIElement as the title bar, it lets Windows handle input to the title bar UIElement the same way it handles input to the default system title bar. For example, a user can move the window by dragging the XAML UIElement, or invoke the window context menu by right-clicking it.
This means that your app no longer receives pointer input when the user interacts with the target UIElement or its children using touch, mouse, or pen. However, you must still handle (or prevent) keyboard input, and determine whether content in the title bar can receive focus by tabbing to it with the keyboard.
In order to make the button within the title bar to respond to the click event, we can add a rectangle for the customizing title bar in xaml page first:
<Grid x:Name="TitleBar">
<!--Add a rectangle here-->
<Rectangle x:Name="BackgroundElement" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Application Name" VerticalAlignment="Center" />
<Button Grid.Column="1" Content="Test" Click="Button_Click" />
</Grid>
</Grid>
Then, set the title bar to the rectangle instead of the entire grid in code behind:
public MainPage()
{
InitializeComponent();
CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
// Set TitleBar to BackgroundElement instead of the entire grid
// Clicks on the BackgroundElement will be treated as clicks on the title bar.
Window.Current.SetTitleBar(BackgroundElement);
}
Here is the official Title bar sample for your reference, and following is the output for the test code above:
I'm new to Windows 10 app development. I'm trying to embed my custom UserControl in a page in my application. For some reason, the content is being completely replaced by whatever I put inside it in the XAML page. To give a better explanation, here is the code:
AppView.xaml (the control)
<UserControl
x:Class="Sirloin.AppView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Sirloin"
xmlns:h="using:Sirloin.Helpers">
<SplitView x:Name="splitView" DisplayMode="CompactOverlay">
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--The hamburger-->
<Button Click="OnHamburgerClicked" Grid.Row="0" Style="{StaticResource MenuButtonStyle}">
<Button.DataContext>
<local:MenuItem Symbol=""/>
</Button.DataContext>
</Button>
<!--Buttons just below the hamburger-->
<ListView x:Name="topView"
Grid.Row="1"
ItemTemplate="{StaticResource ListViewItemTemplate}"/>
<!--Buttons toward the bottom of the menu-->
<ListView x:Name="bottomView"
Grid.Row="3"
ItemTemplate="{StaticResource ListViewItemTemplate}"/>
</Grid>
</SplitView.Pane>
<SplitView.Content>
<!--Where I'd like the content specified in MainPage to appear-->
<Frame x:Name="frame" Background="White"/>
</SplitView.Content>
</SplitView>
</UserControl>
MainPage.xaml
<Page
x:Class="Sirloin.Example.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="using:Sirloin"
xmlns:local="using:Sirloin.Example">
<s:AppView>
<Grid Background="White">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="Hello, world!"/>
</Grid>
</s:AppView>
</Page>
When MainPage renders in the VS designer, it's as if the contents of my user control have been completely gutted out and replaced with whatever is specified in the main page. To give you an idea, here is a screenshot of the designer:
As you can see, there is no menu or SplitView or whatever I've put in my custom control; the only thing that's present is the TextBlock I've specified in the XAML for MainPage.
Anyway, why does this happen and what can I do to fix it?
EDIT: Found the solution I was looking for here, but Peter Duniho's answer has been accepted as it provides a better explanation of what's going on.
UserControl is a subclass of Control (which is similar to WPF's ContentControl). It can have only one child. So you are explicitly overriding the content yourself. By specifying a child element for your AppView in the Page XAML, you are setting the content of the control. This takes precedence over whatever content was specified in the UserControl's own XAML.
Unfortunately, it's not very clear what it is you expected to happen. Maybe you want to provide a property for additional content, which the AppView class can use to add to its own content. Or maybe you should be allowing the client code to provide a DataTemplate and some kind of data item object (e.g. model class), which is used in a ContentPresenter or similar in the AppView XAML.
But whatever you're trying to do, you'll have to do it without using, and overriding the current value of, the implicit Content property of the UserControl in the Page XAML.
I have a Windows Phone App where I would like to achieve the following:
Define a (user)control which has a Button and an arbitrary control. Once the user clicks the Button, the second control becomes visible and the button is hidden.
I can achieve this directly in the CodeBehind or ViewModel but I would like to have some kind of control that I can reuse on all places where I need this.
I googled a bit and come accross the ContentPresenter.
Control:
<StackPanel Background="Red" x:Name="LayoutRoot">
<Button Content="Dummy"/>
<ContentPresenter/>
</StackPanel>
XAML call:
<controls:MyControl>
<TextBlock Text="Text Content"/>
</controls:MyControl>
But the Contentpresenter cannot be used like this and the Button will never be displayed because the page XAML definition of the content will overwrite the content defined in the user control xaml.
I then found hints to use templates, but I did not yet understand how I could combine this with the logic that I would like to apply here.
Should I create a userControl that has VisibilityProperties for the Button and the other control which are then used by the Template?
Any advice or hint is apprechiated to get an idea where to continue my search.
How about:
Control:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Button Content="ClickMe" Click="Button_Click"/>
<StackPanel Grid.Row="1" x:FieldModifier="public" x:Name="Content"/>
</Grid>
Control.cs:
private void Button_Click(object sender, RoutedEventArgs e)
{
if (Content.Visibility == Visibility.Collapsed)
{
Content.Visibility = Visibility.Visible;
}
else
{
Content.Visibility = Visibility.Collapsed;
}
}
MainPage.xaml:
<local:MyUserControl1 x:Name="MyControl" HorizontalAlignment="Left" Margin="327,124,0,0" VerticalAlignment="Top"/>
MainPage.xaml.cs (adding content):
MyControl.Content.Children.Add(new Button());
MyControl.Content.Children.Add(new Button());
MyControl.Content.Children.Add(new Button());
MyControl.Content.Children.Add(new Button());
MyControl.Content.Children.Add(new Button());
MyControl.Content.Children.Add(new Button());
c# vs2010
hi all:
how can I bring to focus on a window all controls hidden on expander.
expander is collapsed at the bottom of the window,
when i click on it to expand it (i have to scroll down,'cause controls are not showing on the window), I would like to bring into focus the first control and be able to see the last control on the window without manually scrolling.
any ideas how to accomplish this task on Xaml or code behind.
thanks
<Window>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<ScrollViewer>
<!-- lol stuff here -->
</ScrollViewer>
<Expander Grid.Row="1">
<TextBlock>Wow! You don't have to scroll to see me!</TextBlock>
</Expander>
</Grid>
</Window>