We Keep Coding

How to make WPF Toolkit charts expand with to fit content?

I'm trying to create some bar charts from DotNetProjects.Wpf.Toolkit that display some data totals, though the data can change at run time. The problem is that I cannot get the chart to fit the size of the content - I always have to provide a fixed value (and setting Height="Auto" doesn't work), but I don't know what the size will need to be while running. What can I do to make my chart fit the content rather than the other way around?
My XAML code looks like this:
<Window
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:Movie_Vault"
xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=DotNetProjects.Layout.Toolkit" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" x:Class="Movie_Vault.frmStatistics"
mc:Ignorable="d"
Title="frmStatistics" Style="{StaticResource RoundedFormStyle}" WindowStartupLocation="CenterOwner">
<Border Style="{StaticResource WindowBorderStyle}">
<DockPanel x:Name="OuterPanel" >
<Border Style="{StaticResource PanelBorderStyle}" DockPanel.Dock="Top">
<DockPanel x:Name="TopPanel" HorizontalAlignment="Stretch" VerticalAlignment="Top">
<Image Height="16" Margin="8,4,8,4" Source="Images/process.png"/>
<TextBlock Style="{StaticResource MediumFont}"><Run Text="Statistics"/></TextBlock>
<DockPanel DockPanel.Dock="Right" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button x:Name="btnClose" Content="X" Style="{StaticResource MicroButtonStyle}" Margin="0,0,8,0" Click="btnClose_Click"/>
</DockPanel>
</DockPanel>
</Border>
<Border Style="{StaticResource PanelBorderStyle}" DockPanel.Dock="Left" Margin="0,8,0,0">
<DockPanel VerticalAlignment="Top" >
<ScrollViewer VerticalScrollBarVisibility="Auto" Height="400" Width="500">
<Grid Name="panelTopGenres">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<toolkit:Chart Name="chartTopGenres" Title="Top Genres" VerticalAlignment="Top"
Margin="16,16,16,8" Padding="8" Background="White" >
<toolkit:BarSeries DependentValuePath="Value" IndependentValuePath="Key"
ItemsSource="{Binding}"
IsSelectionEnabled="False" Background="White"/>
</toolkit:Chart>
<Button Grid.Row="1" x:Name="btnTopGenresToggle" Style="{StaticResource SmallButtonStyle}"
Content="Show All Genres" Width="120"
Margin="16,0,4,4" HorizontalAlignment="Left" Click="btnToggle_Click" />
</Grid>
</ScrollViewer>
</DockPanel>
</Border>
</DockPanel>
</Border>
</Window>

What can I do to make my chart fit the content rather than the other way around?
Get rid of any StackPanels:
<Grid Name="panelTopGenres">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<toolkit:Chart Name="chartTopGenres" Title="Top Genres" VerticalAlignment="Top"
Margin="16,16,16,8" Padding="8" Background="White" >
<toolkit:BarSeries DependentValuePath="Value" IndependentValuePath="Key"
ItemsSource="{Binding}"
IsSelectionEnabled="False" Background="White"/>
</toolkit:Chart>
<Button Grid.Row="1" x:Name="btnTopGenresToggle" Style="{StaticResource SmallButtonStyle}"
Content="Show All Genres" Width="120"
Margin="16,0,4,4" HorizontalAlignment="Left" Click="btnToggle_Click" />
</Grid>
A StackPanel doesn't resize its children.

How can I update this element from the viewmodel

I'm using Material Design toolkit and I want to somehow set the DrawerHost to open or closed from the view model with a property. I have a property in the view model that is already updated from another source. I just need to translate that property to the xaml. Any help appreciated.
<UserControl x:Class="GS.Server.Focuser.FocuserView"
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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d">
<materialDesign:DrawerHost HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderThickness="2"
IsLeftDrawerOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}"
BorderBrush="{DynamicResource MaterialDesignDivider}">
<materialDesign:DrawerHost.LeftDrawerContent>
<Grid Width="700">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<ToggleButton DockPanel.Dock="Top" HorizontalAlignment="Right" Margin="5"
Style="{StaticResource MaterialDesignHamburgerToggleButton}"
Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
CommandParameter="{x:Static Dock.Left}"
IsChecked="{Binding ElementName=MenuToggleButton, Path=IsChecked, Mode=TwoWay}"/>
</StackPanel>
<Label Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center">Focuser Settings Go Here</Label>
</Grid>
</materialDesign:DrawerHost.LeftDrawerContent>
<Grid >
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<ToggleButton Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top"
Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
CommandParameter="{x:Static Dock.Left}"
Style="{StaticResource MaterialDesignHamburgerToggleButton}" IsChecked="False"
x:Name="MenuToggleButton"/>
<TextBlock Grid.Row="1" Text="This is the Focuser Page"
FontWeight="Bold" FontSize="18"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</materialDesign:DrawerHost>

XamlObjectWriterException: Cannot create unknown type '{http://schemas.microsoft.com/winfx/2006/xaml/presentation}Ribbon'

I get this exception when I am adding the Ribbon control in a wpf application. Can someone give me some advice on how to get past it? In my xaml code the ribbon is added in the last tab as you can see on the code that follows. Everything was working normally and the problems started when I added the ribbon.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:v="clr-namespace:Views;assembly=DemoDataGrid"
Title="Testing GUI app" Width="1200" Height="768">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Menu Margin="0" Grid.Row="0" VerticalAlignment="Top" Background="#FFEAF1FB">
<MenuItem Header="File" IsTabStop="False">
<MenuItem Header="Exit" Command="{Binding FileExit}" />
</MenuItem>
<MenuItem Header="Tools" IsTabStop="False"/>
<MenuItem Header="Help" IsTabStop="False"/>
</Menu>
<ToolBarTray Grid.Row="1" Background="DarkGray"/>
<UserControl Grid.Row="2" IsTabStop="False">
<TabControl Margin="10,50,10,10">
<TabItem Header="Date Picker">
<Grid Background="#FFE5E5E5">
<v:DatePickerView/>
</Grid>
</TabItem>
<TabItem Header="Color Picker">
<Grid Background="#FFE5E5E5">
<v:ColorPickerView/>
</Grid>
</TabItem>
<TabItem Header="Combo Box">
<Grid Background="#FFE5E5E5">
<v:ComboBoxView/>
</Grid>
</TabItem>
<TabItem Header="ExtendedDataGrid">
<Grid Background="#FFE5E5E5">
<v:DGridXtendedView/>
</Grid>
</TabItem>
<TabItem Header="RibbonMenu">
<Grid Background="#FFE5E5E5">
<Ribbon/>
</Grid>
</TabItem>
</TabControl>
</UserControl>
<StatusBar Grid.Row="3" VerticalAlignment="Bottom" Background="#FFEAF1FB">
<StatusBarItem Content="{Binding User}"/>
<Separator />
<StatusBarItem Content="{Binding Status}"/>
</StatusBar>
</Grid>

1.
Add reference to System.Windows.Controls.Ribbon
2.
Add namespace to your xaml file
xmlns:ribbon="clr-namespace:System.Windows.Controls.Ribbon;assembly=System.Windows.Controls.Ribbon"

Whats a dynamic way implementing a ScrollViewer in Wpf

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>

TextBlock not Wrapping Silverlight application

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.