I am a complete newbie to WPF. I've been working on a personal project for about 2 weeks. It's been coming along, and suddenly hit a roadblock. Everything was working perfect until I shifted some things around.
It's basically a satellite map as the canvas background, so that I can overlay geometry on it. The image is 10000x10000, and has not changed. It's added as a resource and... funny enough, shows up in the Visual Basic xaml designer.
The local:ZoomBorder class zooms/pans the viewbox/canvas. I did not post the code because it has not been touched since it last worked.
Geometry is being added to the canvas correctly.
I moved around some dimensions, as far as the grid goes. Like adding margins and such, but can't get it back to displaying the imagebrush background, no matter what I do.
<Window x:Class="Temp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Temp"
Title="MainWindow" Height="930" Width="1100" PreviewKeyDown="mapBorder_PreviewKeyDown">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="210" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Row="2" Grid.Column="0">
<StackPanel Name="stackPanel" />
</ScrollViewer>
<local:ZoomBorder x:Name="mapBorder" Background="Gray" Margin="0" Grid.Column="1" Grid.Row="2" ClipToBounds="True">
<Viewbox>
<Canvas Name="mapGrid" Height="10000" Width="10000">
<Canvas.Background>
<ImageBrush ImageSource="map.jpg"/>
</Canvas.Background>
</Canvas>
</Viewbox>
</local:ZoomBorder>
<Button Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" MinWidth="80" Margin="10,0,0,0" Content="Start Refresh" Width="80" Click="buttonStartRefresh" />
<Button Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" MinWidth="80" Margin="110,0,0,0" Content="Stop Refresh" Width="80" Click="buttonStopRefresh" />
<CheckBox Name="Advanced" Grid.Column="1" Grid.Row="1" Margin="10,0,0,0">
<Label Margin="0,-5,0,0">Advanced</Label>
</CheckBox>
</Grid>
</Window>
Related
I have just started learning windows app development. Like what do we call it (A dialog box, Contentdialogbox, Message Dialog)? Thanks in advance.
Okay I tried this since I have my data in a datatemplate inside a contentpresenter(Making a master detail view) now when user clicks on a icon the popup should open and also display the data related to that event selected inside that list.How do I achieve this since the popup dialog control is defined inside a datatemplate so in my cs file it does not recognize the control so I am not able to open the popup dialog.
Xaml Code:
<DataTemplate x:Key="DetailContentTemplate" x:DataType="data:Event">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="50" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="Section2" Grid.Row="0">
<Grid.Background>
<ImageBrush ImageSource="ms-appx:///Assets/8.JPG" Stretch="Fill" />
</Grid.Background>
<TextBlock MaxWidth="250"
Margin="36,62,34,68"
FontFamily="Baskerville Old Face"
FontSize="30"
Foreground="{ThemeResource ToggleButtonPressedForegroundThemeBrush}"
TextWrapping="WrapWholeWords"
d:LayoutOverrides="Width, LeftPosition, RightPosition, TopPosition, BottomPosition">
<Run Text="Gravitas Premier League" />
</TextBlock>
</Grid>
<Grid x:Name="Content"
Grid.Row="1"
Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<RelativePanel>
<SymbolIcon x:Name="symbol"
Margin="0,0,5,0"
HorizontalAlignment="Left"
RelativePanel.AlignLeftWithPanel="True"
Symbol="Globe" />
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
RelativePanel.RightOf="symbol"
Style="{ThemeResource BaseTextBlockStyle}"
Text="Category" />
</RelativePanel>
</StackPanel>
<StackPanel Grid.Column="1" HorizontalAlignment="Center">
<RelativePanel>
<SymbolIcon x:Name="symboll"
Margin="0,0,5,0"
HorizontalAlignment="Left"
RelativePanel.AlignLeftWithPanel="True"
Symbol="People" />
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
RelativePanel.RightOf="symboll"
Style="{ThemeResource BaseTextBlockStyle}"
Text="SubCategory" />
</RelativePanel>
</StackPanel>
<StackPanel Grid.Column="2" HorizontalAlignment="Right">
<RelativePanel>
<SymbolIcon x:Name="symbllol"
Margin="0,0,5,0"
HorizontalAlignment="Left"
RelativePanel.AlignLeftWithPanel="True"
Symbol="Bullets" />
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
RelativePanel.RightOf="symbllol"
Style="{ThemeResource BaseTextBlockStyle}"
Text="Rupee" />
</RelativePanel>
</StackPanel>
</Grid>
<TextBlock Grid.Row="2"
HorizontalAlignment="Center"
Style="{ThemeResource ScenarioDescriptionTextStyle}"
Text="{x:Bind description}"
TextWrapping="WrapWholeWords" />
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SymbolIcon Grid.Column="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Symbol="Phone" />
<SymbolIcon Grid.Column="1"
x:Name="People"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Symbol="People"
IsTapEnabled="True"
Tapped="ShowPopupOffsetClicked"
/>
<SymbolIcon Grid.Column="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Symbol="Mail" />
</Grid>
</Grid>
</DataTemplate>
Now how do I open up the popup when the user taps the symbol with the name People and with necessary bindings of data with a observablecollection say EventList.
There are a lot of ways to implement the UI like in your screenshot. As you've added template10 in your question, I suppose you are using Template10 in your project. And in Template10, we can use ModalDialog to implement this. Here I use a Minimal Template 10 project for example.
Firstly, we may need to change ModalBackground to make the background color looks like what in your screenshot. As the ModalDialog we used here is the root frame created by Bootstrapper automatically, so we need override CreateRootElement in App.xaml.cs like:
public override UIElement CreateRootElement(IActivatedEventArgs e)
{
var b = Current;
var frame = new Windows.UI.Xaml.Controls.Frame();
var nav = b.NavigationServiceFactory(BackButton.Attach, ExistingContent.Include, frame);
//change background
var background = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.Gray);
background.Opacity = 0.2;
return new Template10.Controls.ModalDialog
{
ModalBackground = background,
DisableBackButtonWhenModal = true,
Content = nav.Frame
};
}
Then we can edit Busy.xaml to implement the panel in your screenshot. In Busy.xaml, it's a UserControl used as the ModalContent of ModalDialog. For example,
<UserControl x:Class="T10Minimal.Views.Busy"
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:local="using:T10Minimal.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="300"
d:DesignWidth="400"
mc:Ignorable="d">
<Grid Width="300"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="White"
CornerRadius="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
...
</Grid.RowDefinitions>
<TextBlock Margin="20,0"
VerticalAlignment="Center"
FontSize="24"
Foreground="Black">
Song Options
</TextBlock>
<Button Margin="12"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Click="CloseClicked"
Foreground="Black"
Style="{StaticResource TextBlockButtonStyle}">
<SymbolIcon Symbol="Clear" />
</Button>
...
</Grid>
</UserControl>
The bindings might like the BusyText in the original control, you can change its type to your binding data's type and also change the SetBusy method. After this, you can call SetBusy method in your ShowPopupOffsetClicked method to open the "popup".
This is just a simple sample, you can refer to it to implement your own. And in the sample, I used the ModalDialog created as the root frame of the application. If you need more than one ModalDialog, you can refer to Search (and Login) Sample on GitHub.
How do I implement a persistent navigation bar. Basically an app bar that cannot be dismissed even by the right click action. MS as referred to this in this article ( https://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn440584.aspx ) when discussing the flat navigation in the calculator app and also here ( http://blogs.windows.com/bloggingwindows/2014/05/13/windows-store-refresh-makes-it-easier-to-find-apps/ ) when reviewing changes to the windows store app in windows 8.1.
Here's how you do it.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" x:Name="NavigationPart" Orientation="Horizontal">
<Button Content="Home" />
<Button Content="Products" />
<Button Content="Contact" />
</StackPanel>
<Frame Grid.Row="1" x:Name="ContentPart" />
</Grid>
Best of luck!
After reading your question i started googling and was not able to find any already available app bars for that. So as far as i know there is nothing like persistent App Bar. IsSticky property does help to some extent but still can be dismissed by right click.
But still you can customize things by yourself...
As for eg. you have referred this page in your question.
You can make your own implementation for the same.
This is my implementation just to get you started...
<Page
x:Class="App2.BlankPage5"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="120"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Green">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal">
<Rectangle Width="80" Height="80">
<Rectangle.Fill>
<ImageBrush ImageSource="Assets/windows-image.jpg" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="Home" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</StackPanel>
<TextBlock Text="Top Charts" Grid.Column="1" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Categories" Grid.Column="2" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Collection" Grid.Column="3" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Accounts" Grid.Column="4" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Width="110" Height="110">
<Rectangle.Fill>
<ImageBrush ImageSource="Assets/back.png" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Margin="10, 0, 0, 0" Text="Store" FontSize="70" Grid.Column="1" Foreground="Black" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Grid>
<Grid Grid.Row="2" >
<TextBlock Text="Your Content Here" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="100" Foreground="Black"/>
</Grid>
</Grid>
</Page>
It produces the following output :
I have not worked on the respective event handlers and i hope you can do that according to your needs.
A Basic Advice : Don't try to make too many changes to the already available design templates. Stick to them and only apply the required changes.
I'm trying to put a <Border/> around a <Grid/> in a page, however the border appears to be bordering the page rather than the grid.
This is only XAML in my page element.
<Border Background="Black">
<Grid Background="{ThemeResource ControlBackgroundBrush}" x:Name="LoginCredentials" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="Wrap" Text="Username:" Style="{StaticResource SubheaderTextBlockStyle}" VerticalAlignment="Center" Grid.Row="0" HorizontalAlignment="Right" Margin="5"/>
<TextBox x:Name="UserName" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Center" Text="" Grid.Row="0" Grid.Column="1" TextChanged="UserChange" Margin="5"/>
<Button x:Name="LoginButton" Content="Login" Click="LoginButton_Click" Grid.Row="2" HorizontalAlignment="Right" Margin="5" TabIndex="0"/>
<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Grid.Row="2" Grid.Column="1" />
</Grid>
</Border>
As a test I created a resource to fill the background of the <Grid/> with a colour and also filled the background of the <Border/> with a different colour. The <Grid/> ends up as a box in the center of the screen as intended, but the border <Border/> fills the entire screen. Can anyone tell me why this happens and how to get the <Border/> to fit around the <Grid/> as I want?
Got it!
<Border Background="Black" VerticalAlignment="Center" HorizontalAlignment="Center">
....
</Border>
As soon as i posted the question, what i was missing became clear!
This is my code to open childwindow:
ImageLocation location = new ImageLocation();
location.WindowStartupLocation = Xceed.Wpf.Toolkit.WindowStartupLocation.Center;
location.Show();
But the childwindow doesn't show at all.
This is my xaml for childwindow:
<xctk:ChildWindow x:Class="CXLocalSearch.Dialogs.ImageLocation"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Caption="Image Path"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
Height="64" Width="400">
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="63.95"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Margin="2" TextWrapping="Wrap" Text="Image Path" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<StackPanel Grid.Column="1" HorizontalAlignment="Left" Margin="3,2,0,2" Orientation="Horizontal" >
<TextBox x:Name="txtPath" Margin="0,2" TextWrapping="Wrap" VerticalAlignment="Center" Width="250"/>
<Button x:Name="btnSave" Content="Save" Click="btnSave_Click" Width="60" Margin="3,0,0,0"/>
</StackPanel>
</Grid>
</xctk:ChildWindow>
Could anybody please clarify what the issue is?
From the looks of it, you've separated your ChildWindow into a separate control. That's fine, but it needs to be hosted inside a primary window in order to ever become visible. Start with the simplest thing possible:
<Window>
<Grid>
<Button Click="...">Click to Show</Button>
<xctk:ChildWindow x:Name="childWindow">
<TextBlock>Hello!</TextBlock>
</xctk:ChildWindow>
</Grid>
</Window>
I think you'll find this works fine (assumes event hookup), so take it from there.
I'm trying to show a FlowDocument in a WPF form and have tried both RichTextBox and FlowDocumentScrollViewer. I also require that the window resizes to be able to show all text.
Unfortunately, when I set SizeToContent="WidthAndHeight" for the Window itself, no matter what content I put in the FlowDocument, the window expands to the full width of all my displays! The height seems to resize fine, however.
Anyone know how to get it to resize properly? Looked all over and cannot figure out how to get this going...
XAML below:
<Window x:Class="CustomControls.SecureConfirmationDialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="SecureConfirmationDialog"
MinHeight="120" MinWidth="200"
Height="120" Width="300"
ResizeMode="NoResize"
SizeToContent="WidthAndHeight"
WindowStyle="ToolWindow"
Loaded="Window_Loaded">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<FlowDocumentScrollViewer Name="flowMsg" Grid.Row="0" Grid.ColumnSpan="3" Margin="3" IsToolBarVisible="False" ScrollViewer.VerticalScrollBarVisibility="Hidden" />
<TextBox Name="txtConfirm" Grid.Row="1" Grid.Column="0" Text="Testing" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Margin="3" />
<Button Name="btnOK" Grid.Row="1" Grid.Column="1" Content="OK" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="3" Width="50" Click="btnOK_Click" />
<Button Name="btnCancel" Grid.Row="1" Grid.Column="2" Content="Cancel" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="3" Width="50" Click="btnCancel_Click" />
</Grid>
</Window>
SizeToContent only "works" if the content is actually bounded, in this case however the Grid, which is the content of Window, has no size restrictions so it will try to get all the space it can get, the window responds by giving it as much space as fits the screen.
If you want to prevent this you would need to make the container for your document to size to their content which might be impossible if the document does not have any bounds itself and also behaves in a give-me-all-you-have manner.