I have seen a lot of topic about creating a ComboBox using TreeView but not with an Editable one (the topics shows things with no use of ComboBoxes).
I am currently using the ComboBox with a Grid Panel.
Here is the XAML I am currently using :
<Window x:Class="DandDAdventures.XAML.AddPJWindow"
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:DandDAdventures.XAML"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
Title="Example" Height="300" Width="300">
<DockPanel>
<Grid VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<ComboBox Grid.Column="1" Grid.Row="2" IsEditable="True" x:Name="RaceCB">
<ComboBoxItem HorizontalAlignment="Stretch">
<TreeView ItemsSource="{Binding Children}" x:Name="RaceTV" SelectedItemChanged="RaceTVSelectedItemChanged" >
<TreeViewItem Header="Hello">
<TreeViewItem Header="HelloLvl2"/>
</TreeViewItem>
</TreeView>
</ComboBoxItem>
<ComboBox.Text>
<Binding Path="SelectedItem.Header" ElementName="RaceTV" Mode="OneWay"/>
</ComboBox.Text>
</ComboBox>
</Grid>
</DockPanel>
</Window>
When I have selected an Item, the ComboBox shows "System.Windows.Controls.ComboBoxItem"
I don't know what to do and I need the ComboBox to be editabled.
Thank you a lot !
Related
I want to make something like this type of UI:
There will be two or three buttons always on top with a textbox (no change after window resize).
How can I do this in WPF, actually am new to WPF and I want to do this strictly in .Net & WPF 3.5.
I remember when I started to learn WPF. It was a steep learning curve. You need to look into XAML files to get the UI. For your requirement, the code would look like this...assume you have some background in VS, start new WPF project ect. What you want is some grid and then you can either drag and drop from Toolbox, or you can just type code for your UI elements.
<Window x:Class="WpfApp1.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:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="90*"/>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="90*"/>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="200*"/>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="90*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="50*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="100*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<Button Content="Button" Grid.Column="1" Grid.Row="1" Margin="0,0,0,0"/>
<Button Content="Button" Grid.Column="3" Grid.Row="1" Margin="0,0,0,0"/>
<TextBox Text="Textbox" Grid.Column="5" Grid.Row="1" Margin="0,0,0,0"/>
<Button Content="Button" Grid.Column="7" Grid.Row="1" Margin="0,0,0,0"/>
<Border BorderBrush="Black" BorderThickness="1" Grid.ColumnSpan="7" Grid.Column="1" Height="100" Grid.Row="1" VerticalAlignment="Top">
</Border>
</Grid>
Just, tried to add the second button onto GroupBox, knowing that it's GroupBox after all and was surprised that is not allowed by WPF. Am I right?
<Window x:Class="WpfApplication2.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:WpfApplication2"
mc:Ignorable="d"
Title="MainWindow" Height="768" Width="1024" MinHeight="768" MinWidth="1024" MaxHeight="1080" MaxWidth="1920">
<Grid x:Name="Grid_1" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="80*"/>
<RowDefinition Height="512*"/>
<RowDefinition Height="160*"/>
</Grid.RowDefinitions>
<Image x:Name="image" Grid.Row="1" Source="Resources/truck.png" />
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="112*"/>
<ColumnDefinition Width="247*"/>
<ColumnDefinition Width="247*"/>
<ColumnDefinition Width="247*"/>
<ColumnDefinition Width="118*"/>
</Grid.ColumnDefinitions>
<GroupBox x:Name="groupBox1" Header="Truck1" FontSize="16" Background="BlanchedAlmond" Grid.Column="1" >
<Button x:Name="button" Content="Start1" HorizontalAlignment="Left" Margin="154,6,0,0" VerticalAlignment="Top" Width="75"/>
</GroupBox>
<GroupBox x:Name="groupBox2" Grid.Column="2" Header="Truck2" FontSize="16" Background="BlanchedAlmond" />
<GroupBox x:Name="groupBox3" Grid.Column="3" Header="Truck3" FontSize="16" Background="BlanchedAlmond" />
</Grid>
</Grid>
I am having trouble getting a ScrollViewer to work properly if it's not the only element in the window. I want to scroll through a list of items(a list set as ItemsSource) but also want other elements to be visible in my window. Now i don't know how to set the height relative to the other elements. Is that even a valid approach or am i doing it completly wrong?
<Window x:Class="FactorioWpf.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:FactorioWpf"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525"
Closing="Window_Closing">
<StackPanel>
<Menu>
<MenuItem Header="Items">
<MenuItem Header="Add" Click="ItemsAdd_Click" />
</MenuItem>
</Menu>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="0">
<ItemsControl Name="ItemViewerItemsControl">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
</StackPanel>
I searched for nearly three hours but the only solutions i could find, were to set the scroll viewer as the top element.
It is not gonna work with StackPanel. StackPanel grows based on content. Actually it will work with stack panel but you need to define height of ScrollViewer. Use grid with row definitions.
<Window x:Class="WpfApplication3.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:WpfApplication3"
mc:Ignorable="d" Height="350" Width="525" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Menu Grid.Row="0">
<MenuItem Header="Items">
<MenuItem Header="Add" Click="MenuItem_OnClick" />
</MenuItem>
</Menu>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Column="0">
<ItemsControl Name="ItemViewerItemsControl">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
</Grid>
</Window>
I have a TextBlock that is not wrapping and thinks it has an infinite width. I have tried to bind it to the actualWidth of the Grid and/or UserControl, but both widths come as more than 8000. I have tried disabling the HorizontalScrollBarVisibility in the parent view, but that does not work either. I have also read all question in SO that are related to mine and none of the suggestions seems to work.
<UserControl x:Class="Civica.UI.CurrentUserMenu.Views.ClassName"
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"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="1200">
<UserControl.Resources>
<ResourceDictionary>
<SolidColorBrush x:Key="SeparatorBrush" Color="#66848484" />
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<ScrollViewer x:Name="Viewer" BorderThickness="0" Grid.Column="1" Grid.Row="1" Margin="0,0,0,0" Padding="0"
VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<Grid Background="White" HorizontalAlignment="Left" x:Name="UserControl">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border BorderThickness="0,0,0,1" BorderBrush="{StaticResource SeparatorBrush}" Grid.Row="0">
<TextBlock Text="Text" Margin="0" FontWeight="Black" />
</Border>
<TextBlock Margin="5" Text="{Binding TextProperty}" TextWrapping="Wrap" Grid.Row="1"/>
</Grid>
</ScrollViewer>
</Grid>
</UserControl>
EDIT:
This is the code for the parent view:
<UserControl x:Class="Civica.UI.Ribbon.Views.ViewName"
d:DataContext="{d:DesignInstance Type=ViewMOdelName}"
d:DesignHeight="120"
d:DesignWidth="600"
mc:Ignorable="d">
<Grid ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<telerik:RadRibbonView x:Name="RadRibbon"
Title="Title"
ApplicationButtonContent="Content"
ApplicationMenu="{Binding PropertyName}"
ApplicationName="{Binding PropertyName}"
MinimizeButtonVisibility="Visible"
SelectionChanged="SelectionChanged" ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
</Grid>
</UserControl>
It is the RadRibbonView that contains the first view.
The issue was a style that was being applied by the parent view and specifically a Telerik object. The solution was to find that style, decompile it and copy is to one of our files and change a scrollviewer to a border.
Got his XAML :
<Window x:Class="correctionTests.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Menu Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" IsMainMenu="True">
<MenuItem Header="_Ouvrir" Click="Open_Click"/>
</Menu>
<GroupBox Header="Tests : " VerticalAlignment="Top" Grid.Column="0" Grid.Row="1">
<ListBox HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="testList"/>
</GroupBox>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1"
Grid.Row="1"
Width="5"
Background="#FFBCBCBC"/>
<UserControl x:Name="userContent" Grid.Column="2" Grid.Row="1"/>
</Grid>
</Window>
Now the problem is that the size of the controls on the column 0 is diminishing when i pull the gridsplitter to the RIGHT, on the other hand the size of the controls of the column 0 is increasing while pulling the gridsplitter to the left.
I already found this link on stack that suggested to change the first column's width to Auto.
The problem is : if i do that, the controls does not resize anymore.
How can i do so that my controls get all the width available ? (with the expected gridsplitter behaviour) ?
As your GridSplitter is on separate column, you have to
set ResizeBehavior="PreviousAndNext"