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>
Related
I need to append Main Menu into first grid's row and put canvas into second row.
At runtime I see, that second row rendering under first row. Why? What's wrong?
I can set margin from top, but it's bad and not need at this project.
Screenshot:
screen1
<Window x:Class="OlodimStories.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:OlodimStories"
Title="Olodim Stories"
WindowState="Maximized"
mc:Ignorable="d"
ManipulationStarting="Window_ManipulationStarting"
ManipulationDelta="Window_ManipulationDelta"
ManipulationInertiaStarting="Window_InertiaStarting" Loaded="Window_Loaded">
<Window.Resources>
<MatrixTransform x:Key="InitialMatrixTransform">
<MatrixTransform.Matrix>
<Matrix OffsetX="200" OffsetY="200"/>
</MatrixTransform.Matrix>
</MatrixTransform>
</Window.Resources>
<Grid>
<Canvas Name="rootCanvas" Background="Green" Grid.Row="1" Grid.Column="0"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
<Menu Name="mainMenu" Height="24" VerticalAlignment="Top" HorizontalAlignment="Left" Background="Transparent"
Grid.Row="0" Grid.Column="0">
<MenuItem Header="Меню" FontSize="16">
<MenuItem Header="Открыть" FontSize="16"></MenuItem>
<MenuItem Header="Сохранить" FontSize="16" Click="MenuItem_Click"/>
<MenuItem Name="addImageItem" FontSize="16" Header="Добавить изображение..." Click="AddImageItem_Click"/>
<Separator />
<MenuItem Name="exitApp" Header="Выход" FontSize="16"></MenuItem>
</MenuItem>
</Menu>
</Grid>
</Window>
<Grid.RowDefinitions> is missing:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Canvas Grid.Row="1" Grid.Column="0"/>
<Menu Grid.Row="0" Grid.Column="0">
</Menu>
</Grid>
I use this NotifyIcon Nuget. And created a Context Menu with some different elements in it. (MenuItem, TextBox, Separator, TextBlock, Grid, Slider)
In Windows 7 every thing shows like i want to. (TextBox with HorizontalAlignment="Stretch" use all the space which is free, Slider too, Grid spread also streched)
But in Windows 10 it don't strech. The Textboxes expand if I type a Text that need more space, so thats ok. But the slider is only 1px long, so you can set it to ON/OFF instead of 0 to 255. And the Grid looks ugly.
Win 7 picture Win 10 picture
Here is my Code:
<Window x:Class="ContextMenu.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:tb="http://www.hardcodet.net/taskbar"
xmlns:local="clr-namespace:ContextMenu"
mc:Ignorable="d"
Title="MainWindow" Height="1" Width="100"
AllowsTransparency="True" WindowStyle="None" Background="Black"
Top="0"
Left="0"
Topmost="True" ShowInTaskbar="False">
<Grid>
<tb:TaskbarIcon x:Name="MyNotifyIcon"
IconSource="/Icons/Ninja.ico"
ToolTipText="Overlay">
<tb:TaskbarIcon.ContextMenu>
<ContextMenu>
<MenuItem x:Name="CheckPing" IsCheckable="True" Header="Ping"></MenuItem>
<TextBox x:Name="TextPing" Text="8.8.8.8" HorizontalAlignment="Stretch"/>
<Separator/>
<TextBlock Text="Set the Position"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="WindowTop" HorizontalAlignment="Stretch" Text="0"></TextBox>
<TextBox x:Name="WindowLeft" HorizontalAlignment="Stretch" Grid.Column="1" Text="0"></TextBox>
</Grid>
<TextBlock Text="Set the Opacity"/>
<Slider x:Name="SliderOpacity" Minimum="0" Maximum="255" HorizontalAlignment="Stretch"></Slider>
<TextBlock Text="Set the Fontsize"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="10"></TextBlock>
<Button Grid.Column="1" Content="+"></Button>
<Button Grid.Column="2" Content="-"></Button>
</Grid>
<MenuItem Header="Exit"></MenuItem>
</ContextMenu>
</tb:TaskbarIcon.ContextMenu>
</tb:TaskbarIcon>
<StackPanel x:Name="VerticalStackLong">
<StackPanel x:Name="HorizontalStack" Orientation="Horizontal">
<StackPanel x:Name="MainGrid"></StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</Window>
My solution was to just set the "MinWidth".
for example:
<Slider x:Name="SliderOpacity" Minimum="0" Maximum="255" HorizontalAlignment="Stretch" MinWidth="80"></Slider>
I did not found a better solution until now.
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 !
I'm building an app in which I have created a UserControlthat has a second UserControl inside of it.
Here is the first UserControl:
<UserControl x:Class="TasksMonitor.CustomControls.TaskCardBtn"
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:TasksMonitor.CustomControls"
mc:Ignorable="d"
Name="TaskCardBtnCustomControl"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../CustomButtonsStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style TargetType="ToolTip"></Style>
</ResourceDictionary>
</UserControl.Resources>
<Button Click="OnButtonClick" Style="{DynamicResource FlatCntrlBtn}">
<Grid Width="{Binding ActualWidth, ElementName=TaskCardBtnCustomControl}" VerticalAlignment="Center" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="15"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<Canvas Margin="4,10,0,0" Grid.Column="1">
<Ellipse Width="15" Height="15" Fill="{Binding Path=StatusColor, ElementName=TaskCardBtnCustomControl, FallbackValue=#FFFFFF}"/>
</Canvas>
<TextBlock VerticalAlignment="Center" x:Name="BtnTitle" Grid.Column="3" Text="{Binding Path=BtnText, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"/>
</Grid>
</Button>
</UserControl>
That UserControl is inside of this UserControl:
<UserControl x:Class="TasksMonitor.CustomControls.TaskCardUserControl"
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:TasksMonitor"
xmlns:ut="clr-namespace:TasksMonitor.Utils"
xmlns:cc="clr-namespace:TasksMonitor.CustomControls"
Name="TaskCardUC"
mc:Ignorable="d"
Margin="5"
d:DesignHeight="35" d:DesignWidth="300">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary x:Name="Icons" Source="../Resources/Icons.xaml" />
</ResourceDictionary.MergedDictionaries>
<ut:StatusToColorConverter x:Key="StatusToColor"/>
</ResourceDictionary>
</UserControl.Resources>
<Grid Width="auto">
<Grid Background="#2B2B2B">
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<cc:TaskCardBtn StatusColor="{Binding TskStatus, Converter={StaticResource StatusToColor}}" BtnText="{Binding Path=StuffYeah, ElementName=TaskCardUC}" x:Name="ExpandCollapseBtn" BtnClick="GridContentControl_Expand"/>
</Grid>
<Grid Grid.Row="1" Background="#2B2B2B" Name="GridContent" >
<UserControl Margin="10" Loaded="GridContentControl_Loaded">
</UserControl>
</Grid>
</Grid>
</Grid>
</UserControl>
The second UserControl or Parent UserControl is being used in a DataTemplate:
<Grid.Resources>
<DataTemplate x:Key="itemTemplate">
<cc:TaskCardUserControl StuffYeah="{Binding BtnTxt}"/>
</DataTemplate>
</Grid.Resources>
When I set the Bind to BtnTxt as illustrated in the DataTemplate above it does not work and says that it can't find 'BtnTxt' in object TaskCardUserControl. I feel that this is a binding issue as I have a property from the first UserControl bound to the parent property and then that parent property bound to the DataTemplate. I'm very new to DataTemplates and UserControl in general, would someone be able to point me in the correct direction?
Thanks in advance.
I figured this out...I was setting this.DataContext = this in the code which was actually old code. Once I commented this out everything works as it should. Thanks for the help.
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.