I'm new with WPF and want to set the listview's height to the bottom of my frame. The listview's width ist already set with a fix value. The following code represents my DockPanel:
<DockPanel
Name="dp"
Width="200"
HorizontalAlignment="Left">
<TextBox DockPanel.Dock="Top" Margin="0,5,0,5"/>
<ListView Width="{Binding Path=ActualWidth, ElementName=dp}" Background="Yellow" DockPanel.Dock="Left">
<ListViewItem Content="foobar"/>
<ListViewItem Content="foobar2"/>
</ListView>
</DockPanel>
The first screenshot will show the current szenario:
http://i.imgur.com/XMbMh4t.png
and the heigth shell strech to the height as it is shown in the next picture:
http://i.imgur.com/Tf7O4pK.png
Thanks a lot!
Best regards
Instead of this:
<Window>
<DockPanel>
<Menu DockPanel.Dock="Top">
</Menu>
<DatePicker DockPanel.Dock="Top" />
<TabControl>
<TabItem>
<StackPanel>
</StackPanel>
</TabItem>
<TabItem>
<StackPanel>
<Grid>
</Grid>
<DockPanel>
<TextBox DockPanel.Dock="Top" />
<ListView>
</ListView>
</DockPanel>
</StackPanel>
</TabItem>
<TabItem>
</TabItem>
</TabControl>
</DockPanel>
</Window>
Try this:
<Window>
<DockPanel>
<Menu DockPanel.Dock="Top">
</Menu>
<DatePicker DockPanel.Dock="Top" />
<TabControl>
<TabItem>
<StackPanel>
</StackPanel>
</TabItem>
<TabItem>
<DockPanel> <!-- instead of StackPanel -->
<Grid DockPanel.Dock="Top">
</Grid>
<!-- can now get rid of this <DockPanel> -->
<TextBox DockPanel.Dock="Top" />
<ListView>
</ListView>
</DockPanel>
</TabItem>
<TabItem>
</TabItem>
</TabControl>
</DockPanel>
</Window>
You need to use VerticalAlignment="Stretch" on the ListView element. The same is true for HorizontalAlignment if you need to do the same horizontally.
<DockPanel
Name="dp"
Width="200"
HorizontalAlignment="Left">
<TextBox DockPanel.Dock="Top" Margin="0,5,0,5"/>
<ListView Width="{Binding Path=ActualWidth, ElementName=dp}" VerticalAlignment="Stretch" Background="Yellow" DockPanel.Dock="Left">
<ListViewItem Content="foobar"/>
<ListViewItem Content="foobar2"/>
</ListView>
</DockPanel>
See http://msdn.microsoft.com/en-us/library/ms751709(v=vs.110).aspx for more information.
I have tested your code using VerticalAlignment="Stretch", and I am getting your desired result:
<Window x:Class="WpfApplication1.MainWindow"
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:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<DockPanel
Name="dp"
Width="200"
HorizontalAlignment="Left">
<TextBox DockPanel.Dock="Top" Margin="0,5,0,5"/>
<ListView Width="{Binding Path=ActualWidth, ElementName=dp}" VerticalAlignment="Stretch" Background="Yellow" DockPanel.Dock="Left">
<ListViewItem Content="foobar"/>
<ListViewItem Content="foobar2"/>
</ListView>
</DockPanel>
</Grid>
</Window>
If you cannot get the VerticalAlignment to work properly, we can bind the ActualHeight of an element to its ancestor element. So, add this to your ListView:
Height="{ Binding Path=ActualHeight, RelativeSource={ RelativeSource Mode=FindAncestor, AncestorType={ x:Type Window } } }"
Related
I'm new at WPF. I know from Forms that i can add usercontrols to a panel. How can I do this in WPF? I tried a Grid, DockPanel and StackPanel but I don't know how can I stretch my usercontrol? In this Grid oder what else will only be this usercontrol.
I need to switch the content of the grid or else because I want to display different usercontrols.
Main XAML
<Window x:Class="TaxHelper.MainWindow"
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:entites="clr-namespace:TaxHelper.Entity"
xmlns:local="clr-namespace:TaxHelper"
xmlns:properties="clr-namespace:TaxHelper.Properties"
mc:Ignorable="d"
Title="TaxHelper" Height="558" Width="803">
<Window.Resources>
<local:InvoiceStatusIconConverter x:Key="IconConverter"/>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="251*"/>
<ColumnDefinition Width="292*"/>
</Grid.ColumnDefinitions>
<DockPanel LastChildFill="True">
<Menu DockPanel.Dock="Top" Height="20" Margin="0,0,10,0">
<MenuItem Header="Datebank" Height="20">
<MenuItem Header="Importieren" Name="miImport" Click="miImport_Click"/>
</MenuItem>
<MenuItem Header="Daten" Height="20">
<MenuItem Header="Laden" Name="miLoadData" Click="miLoadData_Click"/>
</MenuItem>
<MenuItem Header="Tests" Height="20">
<MenuItem Header="Add Usercontrol" Name="miTestbutton" Click="miTestbutton_Click"/>
</MenuItem>
</Menu>
<StackPanel></StackPanel>
</DockPanel>
<TreeView x:Name="tvNavigation" Margin="10,26,10,10" HorizontalContentAlignment="Stretch" TreeViewItem.Expanded="tvNavigation_Expanded">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type entites:Owner}" ItemsSource="{Binding Items}">
<TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type entites:EconomyUnit}" ItemsSource="{Binding Items}">
<TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type entites:Report}" ItemsSource="{Binding Items}">
<TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type entites:ReportItem}" ItemsSource="{Binding Items}">
<TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type entites:Invoice}" ItemsSource="{Binding Items}">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Status, Converter={StaticResource IconConverter}}" MaxHeight="16px" MaxWidth="16px" HorizontalAlignment="Left"></Image>
<TextBlock Text="{Binding Company}"/>
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
<!--<StackPanel x:Name="dpContent" Orientation="Vertical" HorizontalAlignment="Stretch" Height="507" Margin="10,10,10,0" VerticalAlignment="Top" Width="408" Grid.Column="1"/>-->
<Grid Height="Auto" Name="dpContent" Width="Auto" Grid.Column="1" Margin="24,26,29,10">
</Grid>
</Grid>
</Window>
Usercontrol:
<UserControl x:Class="TaxHelper.Invoice"
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"
xmlns:local="clr-namespace:TaxHelper"
xmlns:mpp="clr-namespace:MoonPdfLib;assembly=MoonPdfLib"
mc:Ignorable="d" Height="152.438" Width="132.531">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="81*"/>
<RowDefinition Height="14*"/>
</Grid.RowDefinitions>
<mpp:MoonPdfPanel Background="LightGray" ViewType="SinglePage" PageRowDisplay="ContinuousPageRows" PageMargin="0,2,4,2" AllowDrop="True" x:Name="mpp" x:FieldModifier="private"/>
<StackPanel Margin="0,1,0,0" Grid.Row="1">
<Button Content="Exit" Click="Button_Click" Height="12" FontSize="5" />
</StackPanel>
</Grid>
</UserControl>
Add Usercontrol:
private void miTestbutton_Click(object sender, RoutedEventArgs e)
{
Invoice invoice = new Invoice();
invoice.HorizontalAlignment = HorizontalAlignment.Stretch;
invoice.VerticalAlignment = VerticalAlignment.Stretch;
dpContent.Children.Add(invoice);
}
The declaration of the UserContol is setting hard coded values for Width and Height, which means that the control cannot resize itself.
If you replace those two attributes with d:DesignWidth and d:DesignHeight then those values become "design-time only" values, so those values will be used when you view the control in the Visual Studio designer, but not by the application at run-time...
<UserControl x:Class="TaxHelper.Invoice"
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"
xmlns:local="clr-namespace:TaxHelper"
xmlns:mpp="clr-namespace:MoonPdfLib;assembly=MoonPdfLib"
mc:Ignorable="d" d:DesignHeight="152.438" d:DesignWidth="132.531">
<TabControl HorizontalAlignment="Stretch" TabStripPlacement="Left" Margin="10,20,0,0" Name="tabControl2" ItemsSource="{Binding NotesObs}" VerticalAlignment="Stretch" MinHeight="80">
<TabItem Header="Contract Read and understood, proposal letter read and understood." Name="tabItem2" FontSize="14" IsEnabled="True">
<Grid>
<Border Name="b_desc"/>
<TextBox HorizontalAlignment="Stretch" Margin="0" Name="textBox5" Text="{Binding ContractText}"
VerticalAlignment="Stretch" FontSize="12" TextWrapping="Wrap"
AutoWordSelection="True" VerticalScrollBarVisibility="Auto"
AcceptsReturn="True"
Width="{Binding ElementName=b_desc, Path=ActualWidth}"
Height="{Binding ElementName=b_desc, Path=ActualHeight}"
MaxWidth="{Binding ElementName=b_desc, Path=Width}"
MaxHeight="{Binding ElementName=b_desc, Path=Height}" />
</Grid>
</TabItem>
</TabControl>
Above is my Xaml and the name of my ObsCollection is
public ObservableCollection<NotesDisplay> NotesObs { get; set; }
I have declared properly the ContractText column in the NotesDisplay Model. I cant get this to bind for some reason but this works in a datagrid. Can someone explain what I am doing wrong in my XAML?
Thanks
Edit: I have viewed the linked solution but tabs arent showing up when I run the program. They do showup in the display in xaml
<UserControl x:Class="CAT_Application_WPF.UI.NotesPage"
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"
xmlns:local="clr-namespace:CAT_Application_WPF.UI"
xmlns:viewModel="clr-namespace:CAT_Application_WPF.ViewModel"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
mc:Ignorable="d"
xmlns:oxy="http://oxyplot.org/wpf"
d:DesignHeight="640">
<Grid Margin="0,0,0,0" Background="{DynamicResource {x:Static SystemColors.GradientActiveCaptionBrushKey}}" d:DataContext="{d:DesignInstance viewModel:NotesPageViewModel}" >
<Grid.RowDefinitions>
<RowDefinition Height="60*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="400"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TabControl HorizontalAlignment="Stretch" ItemsSource="{Binding NotesObs}" TabStripPlacement="Top" x:Name="_tabControl" VerticalAlignment="Stretch" MinHeight="80" Grid.ColumnSpan="2" Margin="121,28,279,-28">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock>
<TextBlock Text="{Binding ContractText}"/>
</TextBlock>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<TextBlock>
This is <TextBlock Text="{Binding EMSText}"/>
</TextBlock>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</Grid>
</UserControl>
Now it's quite ok but you must remove your TextBlock inside another TextBlock stuff.
You can change
<TextBlock>
<TextBlock Text="{Binding ContractText}"/>
</TextBlock>
to
<TextBlock Text="{Binding ContractText}"/>
And
<TextBlock>
This is <TextBlock Text="{Binding EMSText}"/>
</TextBlock>
to something similar to
<StackPanel Orientation="Horizontal">
<TextBlock>This is</TextBlock>
<TextBlock Text="{Binding EMSText}"/>
</StackPanel>
I have the following usercontrol to define my general control-layout:
<UserControl>
<DockPanel LastChildFill="False">
<ListView DockPanel.Dock="Left"
ItemsSource="{Binding FoundResults}"
SelectedItem="{Binding SelectedItem}"
ItemTemplate="{DynamicResource FoundResultsStyle}"/>
<ContentControl DockPanel.Dock="Top"
Name="WinSock"
Content="{Binding ElementName=BaseWindowUserControl, Path=SpecificView}" />
<StatusBar DockPanel.Dock="Bottom">
<StatusBarItem Content="{Binding StatusBarText, Mode=OneWay}" />
</StatusBar>
</DockPanel>
</UserControl>
Every window should have a ListView on the left side as you can see.
I need a way to define the ItemTemplate in the concrete userControl.
Person-Usercontrol:
<UserControl.Resources>
<DataTemplate x:Key="FoundResultsStyle" DataType="{x:Type Pocos:Person}">
<StackPanel>
<TextBlock Text="{Binding Lastname}"/>
<TextBlock Text="{Binding Firstname}"/>
</StackPanel>
</DataTemplate>
</UserControl.Resources>
The ListView doesn't use my Template which I have defined in my 'concrete' usercontrol. Is there a way to achieve this?
Thank you in advance!
Can you do something like this, so that the DataType, as it changes, will select the correct template?
<UserControl>
<UserControl.Resources>
<DataTemplate DataType="{x:Type Pocos:Person}">
...
</DataTemplate>
<DataTemplate DataType"{x:Type Pocos:Dog}">
...
</DataTemplate>
</UserControl.Resources>
<DockPanel LastChildFill="False">
<ListView
DockPanel.Dock="Left"
ItemsSource="{Binding FoundResults}"
SelectedItem="{Binding SelectedItem}"/>
<ContentControl
DockPanel.Dock="Top"
Name="WinSock"
Content="{Binding ElementName=BaseWindowUserControl, Path=SpecificView}" />
<StatusBar DockPanel.Dock="Bottom">
<StatusBarItem Content="{Binding StatusBarText, Mode=OneWay}" />
</StatusBar>
</DockPanel>
</UserControl>
I have created a TabItem in a ResourceDictionary and use it in my UserControl but the defined content won't show up, why and how to fix this?
The ResourceDic:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">
<ControlTemplate x:Key="T1" TargetType="sdk:TabItem">
<sdk:TabItem>
<sdk:TabItem.Header>
<StackPanel Orientation="Horizontal">
<sdk:Label Content="{TemplateBinding Header}"/>
<Button Content="X" Margin="15,0,0,0"/>
</StackPanel>
</sdk:TabItem.Header>
<toolkit:DockPanel MinWidth="600">
<Grid toolkit:DockPanel.Dock="Left">
<sdk:Label Grid.Row="2" Grid.Column="0" Content="Pic:"/>
...
</Grid>
</toolkit:DockPanel>
</sdk:TabItem>
</ControlTemplate>
</ResourceDictionary>
The UserControl:
<UserControl x:Class="PortView" ....>
<UserControl.Resources>
<ResourceDictionary Source="PortfolioTemplateDictionary.xaml" />
</UserControl.Resources>
<Grid>
<sdk:TabItem Template="{StaticResource T1}" Header="Page 2"/>
</Grid
...
</UserControl>
I have now used the approach explained in this article: TabItem in a separate XAML
<UserControl x:Class="WpfApplication19.Tab1Data"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Grid>
<TextBlock Text="Tab Data" />
</Grid>
</UserControl>
<TabControl>
<TabItem Header="Tab 1">
<tabData:Tab1Data />
</TabItem>
</TabControl>
I know you can do this to get vertical text in a tab header:
<Window x:Class="Abodemploy.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<TabControl Margin="0" Name="tabControl1" FlowDirection="LeftToRight" TabStripPlacement="Left">
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<TextBlock>Homes</TextBlock>
</StackPanel>
</TabItem.Header>
<TabItem.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="90" />
</TransformGroup>
</TabItem.LayoutTransform>
<Grid />
</TabItem>
</TabControl>
</Grid>
</Window>
However the text letters are sideways. What I'd like (if possible) is for the letter orientation to be correct (ie upwards), but the text flow downwards, is this possible, or am I just dreaming the impossible dream?
Thanks Psy
I think the following post answers your question:
vertical-text-in-wpf-textblock
and I was able to get the desired result as follows:
XAML
<Window x:Class="Test.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<TabControl Margin="0" Name="tabControl1" FlowDirection="LeftToRight" TabStripPlacement="Left">
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<TextBlock >
<ItemsControl x:Name="ic"></ItemsControl>
</TextBlock>
</StackPanel>
</TabItem.Header>
<Grid />
</TabItem>
</TabControl>
</Grid>
</Window>
And then set the ItemsSource of the ItemsControl to the string you want in the code behind.
Do you ask for this?
<TabItem.Header>
<StackPanel>
<TextBlock>H</TextBlock>
<TextBlock>o</TextBlock>
<TextBlock>m</TextBlock>
<TextBlock>e</TextBlock>
<TextBlock>s</TextBlock>
</StackPanel>
</TabItem.Header>