How do I change the default page header in a Windows 8 XAML application? The question is simple, just I am still learning XAML.
<Page.DataContext>
<local:MainPageViewModel/>
</Page.DataContext>
<!-- PageAdornerControl displays the back button and a page title -->
<Layout:PageAdornerControl
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
Header="{Binding Header}">
I see Header as the text. My first thought was to change {Binding Header} to {Binding }, however a mouse over on Header shows that as some valid whatever. Also, I would like to use the Visual Studio 2012 properties window to change the text.
There might be other ways, and I am still less than green with XAML, but here is one way using Nate's pageAdornerControl method.
Place the cursor on the Layout:PageAdornerControl in the XAML code area.
Go to the properties window, which should show the type as PageAdornerControl.
Scroll down to header
From the dropdown list, select Go to Source
You will now see another section of code highlighted.
Go to the properties window and the Header attribute will be the actual header text, which you can edit.
Related
When I use the WPF Extended Toolkit BusyIndicator in any other application, I have no problems. Using it in my current application, the text is cut off. I have been playing around with the properties on the BusyIndicator. Here is the xaml:
<xctk:BusyIndicator IsBusy="True" Panel.ZIndex="1000"/>
I wanted to post a picture so you could see what it looks like. The "Please Wait..." text is too low and the bar is laying on top of it. Has anyone experienced this before? I am stumped on what to do. I can't figure out how to change the height of the content inside the box, if that is even the issue.
Edit:
It currently displays as the following:
But I want it to display without the text being covered:
The designer displays it how I want it to display but the application, while running, displays it as shown in image one.
I think that your problem is that you have changed the default textblock size. But you can also fix with the BusyContentTemplate
For example I make the text bigger and red:
<xctk:BusyIndicator IsBusy="True" Panel.ZIndex="1000" >
<xctk:BusyIndicator.BusyContentTemplate>
<DataTemplate>
<TextBlock Foreground="Red" FontSize="15">Please Wait</TextBlock>
</DataTemplate>
</xctk:BusyIndicator.BusyContentTemplate>
</xctk:BusyIndicator>
You can also change the textblock for whatever you want.
I hope this can help you.
I discovered the issue. The underlying datatypes in the WPF Extended Toolkit's BusyIndicator is a grid. One of the grid's properties were being set in a global style file that I was unaware of...
Introduction
For a project I am working on I had to create a ContentControl which must display a ToolTip/Popup when some provided content is not allowed.
For example:
A TextBox is wrapped inside my ContentControl, the ContentControl provides the logic of displaying a ToolTip when unwanted characters are being typed in the TextBox.
A ToolTip would appear displaying the unwanted characters and after x-period of time, the ToolTip would dissapear.
However using the ToolTip approach led to unexpected and unwanted behavior;
on mouse over an empty tooltip is shown (we could get this to close immediately, but it was still visible for a moment)
when the mouse left the control, the tooltip was hidden
the slide effect could not be controlled precise enough, so depending on the location of the tooltip (above or below) the effect was correct or not.
Therefore I need to have another solution which does not rely on the ToolTip.
Example code
The Xaml structure is like
<ContentControl x:Class="xxx.yyy.zzz.UserControls.MyContentControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
... more namespaces ...>
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Content="{TemplateBinding Content}">
<ContentPresenter.ToolTip>
...
And it's usage is like:
<UserControl:Class="xxx.yyy.UserControls.TextBoxControl"
xmlns:cn="clr-namespace:xxx.yyy.zzz.UserControls">
<cn:MyContentControl Info="{Binding ..}" x:Name="MyContentControlName">
<TextBox Text="{Binding Text}" .."/>
</cn:MyContentControl>
Where Info is a dependency property used by my ContentControl's codebehind and for which the input binding is provided by the TextBoxControl's ViewModel.
On a side note:
For our validations we rely on Validation Error Style in WPF, similar to Silverlight and an implementation of How can I move a WPF Popup when its anchor element moves?
I have tried to incorporate some of the template code from the first link mentioned and that resulted only in display a minuscule popup, not displaying anything and neither giving me the behavior I was expecting.
As can be seen in the code snippet, formerly I was using ContentPresenter.ToolTip, unfortunately there is no such thing a ContentPresenter.Popup, whereas I believe a ToolTip is a popup
The question
So how would it be possible to create popup like behavior especially for this piece of code? (this will represent the TextBox on the WPF UI)
<ContentPresenter Content="{TemplateBinding Content}">
I have a problem with vertical line after Menu Items, guess it is some kind of separator between groups of menu items. I already tried to remove it for some time, but I have no idea where to find property to change it. I couldn't find any similar question in stackoverflow. Can anybody help with it?
Here is Xaml code and Image of line:
<Window x:Class="WpfApplication4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
Height="350" Width="525">
<Grid>
<my:Ribbon>
<my:Ribbon.QuickAccessToolBar>
<my:RibbonQuickAccessToolBar>
<Menu>
<MenuItem Header="Sth" />
</Menu>
</my:RibbonQuickAccessToolBar>
</my:Ribbon.QuickAccessToolBar>
</my:Ribbon>
</Grid>
</Window>
Separator which I want to get rid of in QuickAccessToolbar
You should be able to do that by editing the default ControlTemplate for the QuickAccessToolBar control. You can find out how to set this in a custom style for the QuickAccessToolBar in the Styling the QuickAccessToolbar page on the Telerik website. While I'm aware that this linked page is for Silverlight, I believe that you'll find that the process to follow is the same.
You can also find out how to extract the default ControlTemplate for any control in Visual Studio from my answer to the How to Extract Default Control Template In Visual Studio? question here on Stack Overflow. Once you have found the relevant ControlTemplate, just locate and remove the Separator element and set your custom (edited) ControlTemplate to be used as the value for the QuickAccessToolBar.Template property.
Disclaimer: You may find that the Separator element is outside the QuickAccessToolBar element and is in fact part of the Window instead.
What i am basically looking out for is a combination of controls that work as 1 whole. I have no idea what the best way would be to start solving this problem in WPF, either a custom control, existing control, slider...?
Only thing i do not want are 3th party controls and the such.
When a certain condition is met a button with text will be placed inside the slider. Every time when certain conditions are met this situation will keep on happening and buttons will be placed inside the border field.
So it could be possible i have like 10 buttons after each other inside the border. The 2 navigation buttons to the left and right serve as navigation between all those buttons so all can actually get view and pressed when needed for further actions.
Picture that illustrates what i wish to achieve:
You can start with something simple as a StackPanel (you dont need to put it in a page but i wanted to make it copy paste friendly):
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<Button Content="Left"/>
<ListBox>
<ListBoxItem>btnTest 10:00h</ListBoxItem>
<ListBoxItem>btnTest 11:00h</ListBoxItem>
</ListBox>
<Button Content="Right"/>
</StackPanel>
</Page>
Then focus on the appearance and behavior separately.
You need to learn WPF styles, so you can get the colors and layout as in your sample picture. This will also let you make the ListBox horizontal.
Look into the concept of a ViewModel to learn how to populate the ListBox with items. And event handlers for the buttons.
Its a very broad question but I hope this gives you a start.
So I have a Panorama control and the PanoramaItems are programmatically added to the control using the following template.
<UserControl>
<Grid x:Name="LayoutRoot">
<controls:PanoramaItem Name="sitePanoramaItem" Header="{Binding Name}">
<Controls:DockPanel VerticalAlignment="Stretch">
<StackPanel Orientation="Horizontal" Margin="0,10,0,0" Controls:DockPanel.Dock="Top">
<Image Source="../Images/action.png" Width="64" />
<TextBlock Text="{Binding Stats, Mode=TwoWay}" FontSize="45" Margin="15,0,0,0" />
</StackPanel>
<Grid x:Name="graphCanvas" HorizontalAlignment="Stretch" Margin="10,10,10,10"> </Grid>
</Controls:DockPanel>
</controls:PanoramaItem>
</Grid>
</UserControl>
When I click on graphCanvas what I'd like to do is sorta pop the graphCanvas out and display that fullscreen then when I click again restore it to where it was. I've been all over this site and Google and can't find anything similar to what I'm looking for.
I would still like to maintain the Panorama control functionality so that the graphCanvas is still the only one visible but you can cycle through them. Currently I have it sorta working in that I remove the Grid from the DockPanel and put it directly in the LayoutRoot while making the sitePanoramaItem collapsed. However, it's not fullscreen as the Panorama name is still visible (I guess I could hide that as well...) When I put the graphCanvas back int he DockPanel the size of the canvas is all screwed up.
I was hoping there was a simpler way.
Is it even possible?
It is possible to create the UI you describe but it's not going to be simple. You're on the right track with removing it in code and adding it the LayoutRoot and making the Panorama hidden. However you would have to code the scrolling behavior yourself and that is going to be quite tricky - especially making it feel the way to panorama does.
One trick you could try is actually layer a PivotControl on top of your Panorama and have it be collapsed by default. Also edit it's template to remove all default content eg: remove the header control, set margins to 0, etc). Then when you want to go full screen you can remove all the graphCanvases from the Panorama items and and add them to new PivotItems in the PivotControl. Then hide the Panorama and show the Pivot. This will give you scrolling capability for free and the illusion of full screen.
Having said all that I'm not sure I would recommend this. The more common approach would be to simply be to navigate to another page when the user selects an item and handle the full screen aspects there (possibly using the Pivot control again for scrolling). And when you want to leave "fullscreen" mode simply navigate back to the first page. Handling Tombstoning of the fullscreen state will be much easier with this approach for one thing.
You can try making the graphCanvas a Page and putting it in a different XAML. Then add a frame (name it InnerFrame for example) in the same place where you have the graphCanvas right now and navigate to that page with InnerFrame. When the frame is clicked, you navigate with the RootFrame of the app to your graphCanvas page. When you decide to close it, just navigate back with the RootFrame.
Hope it's clear enough :)
Edit:
Navigation in WP7 works very similar as the standard navigation in Silverlight 4, but it's a bit more restrictive. Just throw a PhoneApplicationFrame in your XAML like this:
<phone:PhoneApplicationFrame x:Name="Frame" />
This is basically the same as a Silverlight frame. All the pages you create inherit from PhoneApplicationPage by default, so they can be showed in a frame without any changes.
Your whole application actually runs on a PhoneApplicationFrame. If you take a look at your App class you will see this:
public PhoneApplicationFrame RootFrame { get; private set; }
Here's the MSDN documentation for the navigation system on WP7