General window structure template - c#

for my WPF-application I want a specific window structure for all windows in my application:
<DockPanel>
<UCs:Toolbar DockPanel.Dock="Top"/>
<UCs:SearchPanel DockPanel.Dock="Top"/>
<ContentControl DockPanel.Dock="Top"
Content="{Binding}"/>
<StatusBar DockPanel.Dock="Bottom">
<StatusBarItem Content="Status"/>
</StatusBar>
</DockPanel>
Something like this where I insert the specific user controls in the ContentControl via binding. How can I achieve this?
Because I use this right now for every window:
Window 1:
<DockPanel>
<UCs:Toolbar DockPanel.Dock="Top"/>
<UCs:SearchPanel DockPanel.Dock="Top"/>
<DataGrid .../>
<StatusBar DockPanel.Dock="Bottom">
<StatusBarItem Content="Status"/>
</StatusBar>
</DockPanel>
Window 2:
<DockPanel>
<UCs:Toolbar DockPanel.Dock="Top"/>
<UCs:SearchPanel DockPanel.Dock="Top"/>
<Grid.../>
<StatusBar DockPanel.Dock="Bottom">
<StatusBarItem Content="Status"/>
</StatusBar>
</DockPanel>
If I want to change the order of the toolbar and SearchPanel I have to modify all my windows. I hope there is a way to handle this better...
Thank you in advance

From easy to difficult but elegant:
1-Create a ContentControl that has all the repeated stuff and can host the content which is different in each window. Then in each window, first put your contentcontrol, then your information as its content
2-Create a ControlTemplate for Window and apply it to your windows.

Related

RichTextBox showing texts vertically

Following XAML code:
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<DockPanel LastChildFill="True">
<TextBox Name="textBox1" DockPanel.Dock="Top" />
<GroupBox Header="All Events" DockPanel.Dock="Top">
<RichTextBox Margin="5" Name="richTextBoxEvents"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto" />
</GroupBox>
</DockPanel>
</ScrollViewer>
causes everything displayed in the RichTextBox vertically!
I want the text to appear horizontally. Why is this appearing vertically and how can I fix that?
I'm using C#, WPF and .NET 4.
EDIT
If the ScrollViewer is taken away, then the text appear horizontally. But I need the scroll viewer. What's the solution then?
A similar scenario can be found here.
Your problem can be solved by setting the width of the RichTextBox.
By setting some arbitrary width.
<RichTextBox Margin="5" Name="richTextBoxEvents"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
Width="100" />
Or you can assign the width of the Parent.
<RichTextBox Margin="5" Name="richTextBoxEvents"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
Width="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType=Window, AncestorLevel=3}, Path=ActualWidth}" />
Here you can change the ancestor level depending on your needs,I bind the RichTextBox width to the Window's width and AncestorLevel is 3.
RichTextBox will always word wrap, so I'm assuming that the ScrollViewer is forcing it to start word wrapping.
If you remove the auto visibility, then it works as expected and you'll still get your scrollbars:
<ScrollViewer>
<DockPanel LastChildFill="True">
<TextBox Name="textBox1" DockPanel.Dock="Top" />
<GroupBox Header="All Events" DockPanel.Dock="Top">
<RichTextBox Margin="5" Name="richTextBoxEvents" />
</GroupBox>
</DockPanel>
</ScrollViewer>

How to adapt the app to multiple resolution in Windows8

I have the layout code below in xaml
<Grid>
<StackPanel x:Name="TestStackPanel" Grid.Row="2" Orientation="Horizontal">
<ScrollViewer x:Name="TestScrollViewer" Height="300" VerticalScrollBarVisibility="Auto">
<GridView x:Name="TestGridView"
Width="940"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
ItemTemplate="{StaticResource TestTemplate}"
ItemsPanel="{StaticResource TestItemPanelTemplate}"
ItemContainerStyle="{StaticResource TestItemStyle}"
SelectionMode="None"
HorizontalAlignment="Left"/>
</ScrollViewer>
<Button x:Name="TestButton" Content="ClickMe" VerticalAlignment="Bottom" Margin="10,5,0,0" Click="TestButton_Click"/>
</StackPanel>
</Grid>
This displays well in 1366*768 resolution, but if I change the resolution to 2560*1400, it couldn't displays as expected, I know it's certain, but how to adpat the layout to different resolutions? I have tried to add a ViewBox to encapsulate the Grid, it works well in FullScreenLandScape view, but when I change the app to Snap view, the Grid displays in a samll space.
Anyone can help?
Register to the LayoutUpdated event at the UI element.
And re-calculate the layout according to Window.Current.Bounds.Width.

Bind a CodeBehind instance of StackPanel to XAML

I have an odd scenario.
I need to create a StackPanel in codebehind. I then need to have that stackpanel bound to the UI in xaml.
Normally I would just use a ContentControl for this. But it has focus issues (it cannot blocked from the tab order Focusable="False" has no effect). I also tried a usercontrol, but that had the same issues.
So I need to use some other kind of control. I have decided on a Panel. (StackPanel seems as good as any of the panels.)
However, I can't seem to find a way to bind to my "In Code" stack panel in my Xaml?
Is there a way to do this? (WITHOUT using a contentcontrol or usercontrol)
it cannot blocked from the tab order Focusable="False" has no effect
What about IsTabStop?
Also the most lightweight thing to use is a ContentPresenter which is what i would use.
Tested this in KAXAML, and the focus doesn't go to any of the items defined in the ContentPresenter or ContentControl when TAB is pressed.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<TextBox>aaaaa</TextBox>
<TextBox>bbbbb</TextBox>
<ContentControl Focusable="False">
<ContentControl.ContentTemplate>
<DataTemplate>
<StackPanel Focusable="False" Background="Red" Width="100" Height="50"></StackPanel>
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
<ContentControl Focusable="False">
<ContentControl.ContentTemplate>
<DataTemplate>
<TextBox Focusable="False">hello</TextBox>
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
<ContentPresenter Focusable="False">
<ContentPresenter.Content>
<TextBox Focusable="False">hello</TextBox>
</ContentPresenter.Content>
</ContentPresenter>
<TextBox>ccccc</TextBox>
<TextBox>ddddd</TextBox>
</StackPanel>
</Page>

WPF Issues with Control Layout

I am making an application that connects to our billing software using its API, and I am running into a few issues getting the layout working properly.
I want to make it so that when one of the expanders is minimized, the other window fills the gap, and when it is expanded again the other expander goes back to where it was. Right now when the arrow is clicked on one, there is just an empty gap. I used a DockPanel as the parent which I assumed would automatically do this, but it isn't working.
Second question, is there a way to make these areas resizable? I don't want to try and get too frisky with allowing the user to undock the menus (don't even know if that is possible with just straight WPF) but it would be nice if they could change the width/height of them.
Also, just a newbie question to C#, but what is the equivalent of a C++ header file? It looks like you just use .cs files, but I am not sure. I want to extract all of my functions that pull the data from the billing software and put them into a different file to clean up the code.
Here is my XAML...
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Billing Management" Height="550" Width="754" xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared" WindowStartupLocation="CenterScreen" WindowStyle="ThreeDBorderWindow">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="22" />
<RowDefinition />
</Grid.RowDefinitions>
<Menu Height="22" Name="menu1" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" HorizontalContentAlignment="Left" IsEnabled="True" IsMainMenu="True">
<MenuItem Header="_File">
<MenuItem Header="_Open" />
<MenuItem Header="_Close" />
<Separator/>
<MenuItem Header="_Exit" />
</MenuItem>
</Menu>
<TabControl Name="tabControl1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" BorderThickness="1" Padding="0" TabStripPlacement="Bottom" UseLayoutRounding="False" FlowDirection="LeftToRight" Grid.Row="1">
<TabItem Header="Main" Name="tabItem1" Margin="0">
<DockPanel Name="dockPanel1" LastChildFill="True">
<ListBox Height="100" Name="listBox3" DockPanel.Dock="Top" />
<ListBox Name="listBox4" Width="200" DockPanel.Dock="Right" />
<DockPanel Height="Auto" Name="dockPanel2" Width="Auto" VerticalAlignment="Stretch" LastChildFill="True">
<shared:AnimatedExpander Header="Staff Online" Width="200" Name="expanderStaffOnline" IsExpanded="True" Height="194" BorderThickness="0" DockPanel.Dock="Top" VerticalContentAlignment="Stretch">
<ListBox Name="listboxStaffOnline" Width="Auto" Height="Auto" Margin="0" VerticalAlignment="Stretch" Loaded="listboxStaffOnline_Loaded" />
</shared:AnimatedExpander>
<shared:AnimatedExpander Header="Test Menu 2" Height="Auto" Name="animatedExpander1" BorderThickness="1" Margin="0,0,0,0" IsExpanded="True" VerticalContentAlignment="Stretch">
<ListBox Height="Auto" HorizontalAlignment="Stretch" Name="listBox6" VerticalAlignment="Stretch" Margin="0" BorderThickness="1" />
</shared:AnimatedExpander>
</DockPanel>
<ListBox Height="100" Name="listboxAdminLogs" DockPanel.Dock="Bottom" Loaded="listboxAdminLogs_Loaded" />
<ListBox Name="listBox5" />
</DockPanel>
</TabItem>
<TabItem Header="Support" Name="tabItem2" Margin="0">
</TabItem>
<TabItem Header="Clients" />
<TabItem Header="Billing" />
<TabItem Header="Orders" />
</TabControl>
</Grid>
</Window>
You should place your expanders in a Grid which will allow the content to expand and fill automatically. providing the Row / Column definitions width / height are set to Auto or *.
If you want to resize you will need to use the GridSplitter; see http://www.wpftutorial.net/GridLayout.html for further details.
I don't know C++ so can't really tell you want the equivalent of header files are but I think what you are trying to do is achievable using partial classes; see http://msdn.microsoft.com/en-us/library/wa80x488(v=vs.80).aspx for further details.
And finally, to answer your question in your comments; To get a uniform appearance for all controls in WPF you would need to create custom Styles which use a common set of Colors / Brushes.
I suggest you put the expanders in a Grid and set the row height of the gridrows to auto.
To make it resizable simply add GridSplitters in inbetween rows of this grid.
As for your added question: I think it would be better to copy the style of the expanders' headers and use it for a label or other header.
Also (many questions in this one): C# has no header files.

How to automatically size TabControl in a DockPanel - WPF

I have a simple WPF Forms app. I have a DockPanel as my root panel. The first child is a StackPanel that has some controls in it, then the second control is a TabControl. What I want, and the panel types can change all they want is for the TabControl to maintain the fill size of the window except for what the first StackPanel consumes. However no matter what I try the TabControl seems to change its size depending on whats inside it, not whats it is inside of.
<Window>
<DockPanel>
<StackPanel> </StackPanel>
<TabControl> </TabControl>
</DockPanel>
</Window>
Just set the HorizontalAlignment and VerticalAlignment properties of your TabControl to "Stretch":
<DockPanel>
<StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" Margin="5">
<TextBlock Text="Hello" />
<TextBlock Text="World" />
</StackPanel>
<TabControl HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<TabItem Header="Small">
<TextBlock Text="Just Some Small Stuff" />
</TabItem>
<TabItem Header="Bigger">
<StackPanel>
<TextBlock Text="One line" />
<TextBlock Text="The next line" />
</StackPanel>
</TabItem>
</TabControl>
</DockPanel>

Categories

Resources