I am using WPF Toolkit from xceed because I want to create a wizard in my WPF application. This seemed like a good option. Their sample wizard works but I'm unsure how I add my own controls to a wizard page. The documentation is quite limited and only really shows how to change the presentation of the wizard, rather than the behaviour.
When I move control definitions within the .xaml file to be inside the wizard, it says that Wizard should only contain WizardPages. Is it something I need to do in the code behind instead? You might have guessed that this is my first go with WPF.
Code below. I want the border & stackpanel at the bottom to only show up in one of the wizard pages. Currently they just sit on top of the wizard
<Window xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:myApp"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
x:Class="myApp.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="800" Width="1000" MinWidth="5">
<Window.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="LightGray" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Window.BorderBrush>
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="767*"/>
<ColumnDefinition Width="199*"/>
<ColumnDefinition Width="6*"/>
</Grid.ColumnDefinitions>
<xctk:Wizard FinishButtonClosesWindow="True">
<xctk:WizardPage x:Name="IntroPage"
Title="Welcome to my Wizard"
Description="This Wizard will walk you though how to do something." />
<xctk:WizardPage x:Name="Page1" PageType="Interior"
Title="Page 1"
Description="This is the first page in the process."
NextPage="{Binding ElementName=Page2}"
PreviousPage="{Binding ElementName=IntroPage}"/>
<xctk:WizardPage x:Name="Page2" PageType="Interior"
Title="Page 2"
Description="This is the second page in the process"/>
<xctk:WizardPage x:Name="LastPage" PageType="Interior"
Title="Last Page"
Description="This is the last page in the process"
CanFinish="True"/>
</xctk:Wizard>
<Border Background="GhostWhite" BorderBrush="Silver" BorderThickness="1" CornerRadius="3,3,3,3" Grid.Column="1">
<StackPanel Margin="10">
<Button Content="Button 1"/>
<Button Content="Button 2"/>
<TextBox Controls:TextBoxHelper.Watermark="This is a textbox" />
<Controls:ToggleSwitch Header="Click me" />
</StackPanel>
</Border>
</Grid>
You could put the Border element inside the <xctk:WizardPage> element, e.g.:
<xctk:WizardPage x:Name="LastPage" PageType="Interior"
Title="Last Page"
Description="This is the last page in the process"
CanFinish="True">
<Border Background="GhostWhite" BorderBrush="Silver" BorderThickness="1" CornerRadius="3,3,3,3" Grid.Column="1">
<StackPanel Margin="10">
<Button Content="Button 1"/>
<Button Content="Button 2"/>
<TextBox />
</StackPanel>
</Border>
</xctk:WizardPage>
Related
Using the menu control in a xaml window, I have this annoying white space between the window border and the docking panel.
The menu itself is inside a stackpanel:
<Window x:Class="COZView.Shell"
xmlns:ad="clr-namespace:AvalonDock;assembly=AvalonDock"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sc="clr-namespace:COZView.StaticContent"
xmlns:ve="clr-namespace:COZView.View_Edit"
Title="COZView" Width="1024" Height="800" Icon="/COZView;component/Images/COZView.png"
Loaded="OnLoaded" IsVisibleChanged="isVisibleChanged" Closing="OnClosing">
<Grid x:Name="ShellRegion">
<StackPanel Height="Auto" Orientation="Vertical">
<Menu x:Name="menu">
<!-- MENU ITEMS REMOVED -->
</Menu>
<Grid x:Name="DockingRegion" >
<ad:DockingManager x:Name="DockManager">
<ad:ResizingPanel>
<ad:DocumentPane Margin="0,0,0,0">
<sc:StartPage Title="Home Page" VerticalContentAlignment="Stretch"
onProjectOpenFail="StartPage_onProjectOpenFail"
onProjectOpenSuccess="StartPage_onProjectOpenSuccess"
onProjectCreateSuccess="StartPage_onProjectCreateSuccess"
onProjectCreateFail="StartPage_onProjectCreateFail"/>
</ad:DocumentPane>
<ad:DockablePane ad:ResizingPanel.ResizeWidth="300" x:Name="ExplorerPane" FontSize="14" FontWeight="Bold">
<sc:AboutTab x:Name="about" Title="About" FontSize="14" FontWeight="Bold"/>
<sc:ProcessExplorer x:Name="pxProcessExplorer" Title="Process Explorer" FontSize="14"/>
<sc:DataExplorer x:Name="adDataExplorer" Title="Data Explorer" FontSize="14"/>
<!--<sc:UREPExplorer x:Name="adUREPExplorer" Title="UREP Custom Navigation" FontSize="14" Visibility="Hidden"/>-->
</ad:DockablePane>
</ad:ResizingPanel>
</ad:DockingManager>
</Grid>
</StackPanel>
</Grid>
How do i remove the white space? Do I have to surrond it in something? Should the menu be in a different container?
Its just the default menu style where Background is defined as
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#FFF6F6F6" Offset="0.25" />
<GradientStop Color="#FFEAE8E8" Offset="0.25" />
<GradientStop Color="#FFDCD9D9" Offset="0.8" />
<GradientStop Color="#FFFFFFFF" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
Define a different background if you dont like the #FFFFFFFF bottom line.
Here's a picture of the overlay from the sample app:
Here's the git page of the Material Design In XAML Toolkit (you can download the demo project here): Toolkit:https://github.com/ButchersBoy/MaterialDesignInXamlToolkit
This is probably property somewhere in the Material Design In XAML Toolkit library and i am asking if anyone knows how to set it (or if the overlay can even be turned off).
<Window x:Class="MaterialDesignColors.WpfExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wpfExample="clr-namespace:MaterialDesignColors.WpfExample"
xmlns:domain="clr-namespace:MaterialDesignColors.WpfExample.Domain"
xmlns:system="clr-namespace:System;assembly=mscorlib"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:domain1="clr-namespace:MaterialDesignDemo.Domain"
xmlns:materialDesignDemo="clr-namespace:MaterialDesignDemo"
Title="Material Design in XAML" Height="800" Width="1100"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
TextElement.FontWeight="Regular"
TextElement.FontSize="13"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextRenderingMode="Auto"
Background="{DynamicResource MaterialDesignPaper}"
FontFamily="{StaticResource MaterialDesignFont}" Icon="favicon.ico">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Shadows.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ToggleButton.xaml" />
</ResourceDictionary.MergedDictionaries>
<!-- data template used for the dialogs example, defines a View for a ViewModel of type DateTime -->
<DataTemplate DataType="{x:Type system:DateTime}">
<StackPanel Margin="16">
<TextBlock>England win the World Cup:</TextBlock>
<TextBlock Margin="0 8 0 0" Text="{Binding }" />
<TextBlock Margin="0 8 0 0" >You will never see that again.</TextBlock>
<Button Margin="0 8 0 0" IsDefault="True" Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}" Style="{DynamicResource MaterialDesignFlatButton}">AWESOME</Button>
</StackPanel>
</DataTemplate>
</ResourceDictionary>
</Window.Resources>
<materialDesign:DialogHost Identifier="RootDialog">
<materialDesign:DrawerHost IsLeftDrawerOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}">
<materialDesign:DrawerHost.LeftDrawerContent>
<DockPanel MinWidth="212">
<ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}"
DockPanel.Dock="Top"
HorizontalAlignment="Right" Margin="16"
IsChecked="{Binding ElementName=MenuToggleButton, Path=IsChecked, Mode=TwoWay}" />
<ListBox x:Name="DemoItemsListBox" Margin="0 16 0 16" SelectedIndex="0"
PreviewMouseLeftButtonUp="UIElement_OnPreviewMouseLeftButtonUp">
<ListBox.ItemTemplate>
<DataTemplate DataType="domain:DemoItem">
<TextBlock Text="{Binding Name}" Margin="32 0 32 0" />
</DataTemplate>
</ListBox.ItemTemplate>
<domain:DemoItem Name="Home">
...
<domain:DemoItem Name="Shadows">
<domain:DemoItem.Content>
<wpfExample:Shadows />
</domain:DemoItem.Content>
</domain:DemoItem>
</ListBox>
</DockPanel>
</materialDesign:DrawerHost.LeftDrawerContent>
<DockPanel>
<materialDesign:ColorZone Padding="16" materialDesign:ShadowAssist.ShadowDepth="Depth2"
Mode="PrimaryMid" DockPanel.Dock="Top">
<DockPanel>
<ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}" IsChecked="False"
x:Name="MenuToggleButton"/>
<materialDesign:PopupBox DockPanel.Dock="Right" PlacementMode="BottomAndAlignRightEdges" StaysOpen="False">
<StackPanel>
<Button Content="Hello World" Click="MenuPopupButton_OnClick"/>
<Button Content="Nice Popup" Click="MenuPopupButton_OnClick"/>
<Button Content="Goodbye" Click="MenuPopupButton_OnClick"/>
</StackPanel>
</materialDesign:PopupBox>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22">Material Design In XAML Toolkit</TextBlock>
</DockPanel>
</materialDesign:ColorZone>
<ContentControl Margin="16" Content="{Binding ElementName=DemoItemsListBox, Path=SelectedItem.Content}" />
</DockPanel>
</materialDesign:DrawerHost>
</materialDesign:DialogHost>
</Window>
The black shade is due to a grid defined in Generic.xaml:
<Grid x:Name="PART_ContentCover" Background="{x:Null}" Opacity="0"
IsHitTestVisible="False" Focusable="False" />
Which is animated to set the opacity to 0.56 when the drawer is drawn. Unfortunatelly this grid does not belong to any template so you cannot change it in client xaml.
The other option is to change the shade's black brush which is also defined in Generic.xaml:
<SolidColorBrush x:Key="BlackBackground" Color="Black" />
But this is also something I wouldn't know how to change from a client xaml, so the only advice until someone with more WPF skillz gives a better option is to simply recompile the source and change the black brush to:
<SolidColorBrush x:Key="BlackBackground" Color="#00000000" />
Alternatively you can use the flyout control which is shown in the other demo that does not have the dark shade feature but other than that is the same.
Update: I've found one way to solve this. You can subclass DrawerHost like this:
public class DrawerHostEx : DrawerHost
{
public DrawerHostEx()
{
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
var grid = GetTemplateChild(TemplateContentCoverPartName) as System.Windows.Controls.Grid;
grid.Visibility = System.Windows.Visibility.Collapsed;
}
}
Then you simply replace DrawerHost with DrawerHostEx in the XAML.
Trying to implement a conversation view in a wp8.1 app using telerik controls, a platform im not familiar with. I keep getting a reference error on build:
Error 3 The name "RadPointerContentControl" does not exist in the namespace "clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives". D:\Visual Studio Workspace\Sports App\Sports App Prototype\Sports App Prototype\MainPage.xaml 74 29 Sports App Prototype
This error is really confusing me. I have referenced
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
in the XAML document but cannot seem to get it working properly, as if its just not seeing the reference properly, or is missing it at build time, tbh i havent a clue!
Any help would be much appreciated.
EDIT: XAML
<Page xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
x:Class="Sports_App_Prototype.MainPage"
xmlns:primitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls.Primitives"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Sports_App_Prototype"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Pivot>
<Flyout x:Name="registration" >
<Grid Height="320">
<TextBlock Margin="0,0,0,309">
Register New User or Login
</TextBlock>
<TextBox Margin="10,59,10,0" Text="Password">
</TextBox>
<TextBox Margin="10,16,10,0" Text="Username">
</TextBox>
<CheckBox Margin="172,99,0,0" Content="Accept">
</CheckBox>
<Button Content="Register/Login" Margin="10,99,0,164">
</Button>
</Grid>
</Flyout>
<PivotItem Header="map view">
<StackPanel>
<Maps:MapControl Height="450" Width="355" />
<Button x:Name="FilterButton" HorizontalAlignment="Center" Click="Filter_Click" Content="Filter" Margin="126,0,126.667,0" Height="61"/>
</StackPanel>
</PivotItem>
<Flyout x:Name="Filter">
<Grid>
<StackPanel>
<TextBlock>
Filter Users
</TextBlock>
<RichTextBlock>
<!-- Stuff goes here for RTB -->
</RichTextBlock>
<CheckBox>
Dynamically generated from user #1
</CheckBox>
<CheckBox>
Dynamically generated from user #2
</CheckBox>
<CheckBox>g
Dynamically generated from user #3
</CheckBox>
<CheckBox>
Dynamically generated from user #4
</CheckBox>
</StackPanel>
</Grid>
</Flyout>
<PivotItem Header="chat">
<DataTemplate>
<Grid Margin="12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<telerikPrimitives:RadPointerContentControl Background="{StaticResource PhoneAccentBrush}"
TargetPoint="-150,-300">
<telerikPrimitives:RadPointerContentControl.PointerTemplate>
<DataTemplate>
<Polygon Width="12"
Height="24"
Points="0,0 12,0 12,12 0,24"
StrokeThickness="0"
Fill="{StaticResource PhoneAccentBrush}"
RenderTransformOrigin="0.5, 0.5">
<Polygon.RenderTransform>
<ScaleTransform ScaleX="-1"/>
</Polygon.RenderTransform>
</Polygon>
</DataTemplate>
</telerikPrimitives:RadPointerContentControl.PointerTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Text}"
TextWrapping="Wrap"
Margin="12"/>
<TextBlock Text="{Binding Path=TimeStamp}"
Margin="12, 0, 12, 12"
HorizontalAlignment="Right"/>
</StackPanel>
</telerikPrimitives:RadPointerContentControl>
</Grid>
</DataTemplate>
</PivotItem>
</Pivot>
</Grid>
This is complaining that it cannot find the reference to the .DLL. Under references in Visual Studio, do you have the file called Telerik.Windows.Controls.Primitives added? If so, then please post your entire XAML file and I'll help you troubleshoot it.
BTW, make sure you are using a Silverlight WP8.1 app and not a WinRT app.
I have a UI like below :
Problem is at the moment the line splitting the name from the message is not visible unless the screen is filled (its basically a border on a custom control).
What I would like is for the parent control (stackpanel) to permanently have a line through it and not have to use the border on each MessageControl.
Is this possible?
Here is the code for the stackpanel :
<UserControl x:Class="ChatBoxWPF.ChatWindow"
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"
mc:Ignorable="d" d:DesignHeight="402" d:DesignWidth="700" xmlns:my="clr-namespace:ChatBoxWPF" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch">
<ScrollViewer>
<StackPanel Name="Messages" VerticalAlignment="Bottom"></StackPanel>
</ScrollViewer>
</UserControl>
UPDATE 1:
I tried this :
<ScrollViewer Name="scroll">
<StackPanel Name="Messages" VerticalAlignment="Bottom">
<Line StrokeThickness="1" X1="100" Y1="0" X2="100" Y2="{Binding ElementName=scroll, Path=ActualHeight}" />
</StackPanel>
</ScrollViewer>
Without the grid. It now sometimes shows in the designer, and other times not. And when run doesn't show at all. Do I need the grid?
A very blunt and simple approach:
<Grid>
<ScrollViewer>
<StackPanel Name="Messages" VerticalAlignment="Bottom"></StackPanel>
</ScrollViewer>
<Line StrokeThickness="0.5" X1="116" X2="116" Y1="0" Stroke="Gainsboro" Y2="{Binding ElementName=ToLevelControl, Path=ActualHeight}" />
</Grid>
I suggest you use a 2nd layer for you background - the 2nd layer could be a simple grid or anything you like:
<Grid>
<Grid ZIndex="0">
<anything I want!>
</Grid>
<ScrollViewer ZIndex="1">
<StackPanel Name="Messages" VerticalAlignment="Bottom">
</StackPanel>
</ScrollViewer>
</Grid>
the thing i am battling today is the scrollviewer, and the fact that it blocks my events.SO..here's some xaml:
<ScrollViewer x:Name="scrollv" Panel.ZIndex="15" Margin="8,65.5,0,22" VerticalScrollBarVisibility="Visible" Height="392.5" Background="White" IsHitTestVisible="False">
<Grid x:Name="listaintrebari" Height="Auto" Width="301.5" HorizontalAlignment="Left" VerticalAlignment="Top" Background="White" >
</Grid>
</ScrollViewer>
So the thing is: on the grid which is inside the scrollviewer i programaticly add the questions UserControl...which incidentaly has a button with a click event.My problem is that i cant manage to click the button..it's like the scrollviewer is acting like an invisible shield to protect the usercontrol and the button from the evil Mouse!
Any help apreciated!
EDIT:(this is my questions Usercontrol)
<UserControl
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:eHelper_v3"
mc:Ignorable="d"
x:Class="eHelper_v3.questions"
x:Name="IntrebareControl" Width="330.641" Margin="0" MouseLeftButtonDown="IntrebareControl_MouseLeftButtonDown"
>
<Grid x:Name="LayoutRoot" ScrollViewer.VerticalScrollBarVisibility="Disabled" Margin="0,0,13,0" Height="90" >
<Rectangle x:Name="rect" Panel.ZIndex="20" Height="90" Stroke="#FF0975A3" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#1404BFD8" Offset="0.004"/>
<GradientStop Color="#1300A7FF" Offset="0.996"/>
<GradientStop Color="#2B0F82CC" Offset="0.459"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Image x:Name="imagine" HorizontalAlignment="Left" Margin="8,8,0,8" Width="126.667" Stretch="Fill" MouseLeftButtonDown="imagine_MouseLeftButtonDown" />
<TextBlock x:Name="textul" Margin="138.667,8,8,22.5" TextWrapping="Wrap" Text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" FontSize="9.333"/>
<Label x:Name="status" Content="Status" Height="22" Margin="127,0,100,0.5" VerticalAlignment="Bottom" FontSize="9.333" Background="#00894848" Foreground="Red"/>
<Button x:Name="raspundeBtn" Content="Raspunde" HorizontalAlignment="Right" Height="18" Margin="0,0,8,4.5" VerticalAlignment="Bottom" Width="50.974" FontSize="9.333" Click="raspundeBtn_Click"/>
</Grid>
REEDITED ...wrong code inserted...kinda sleepy over here
Perhaps, some control ist in front of your button. To click "through" a control you can use
IsHitTestVisible="false"
Can you post your CommentThat ?
#after your edit:
It seems like your RichTextBox and that FlowDocument lies over the Button.
Add your Button as the last child of your Grid.
The user control is handling the left mouse button so the click does not get to the content.
MouseLeftButtonDown="IntrebareControl_MouseLeftButtonDown"
Does that event get raised?
Just in case someone also has problems with the ScrollViewer preventing mouse button events from firing, I solved this by setting a ZIndex for the corresponding UIElement:
<TextBlock Text="Hello World!" Panel.ZIndex="2" MouseLeftButtonUp="TextBlockMouseLeftButtonUp"/>