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>
Related
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.
The Error Page says: "The application is in break Mode"
Getting the Color of the ColorPicker and using it as Background for the Ellipse is working just fine.
My XAML Code:
.
<Window x:Class="FirstApp.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:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:local="clr-namespace:FirstApp"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="250" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
</Grid.RowDefinitions>
<TextBox Grid.Column="0" Grid.Row="0" Text="Neuer Name" Name="txtName"/>
<Button Grid.Column="1" Grid.Row="0" Content="Kopieren" Name="btnKopieren" Click="btnKopieren_Click"
/>
<Slider Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Name="slRadius"
Maximum="200" />
<Ellipse Grid.Column="0" Grid.Row="2"
Fill="{Binding ElementName=colorPicker, Path=HexadecimalString}"
Stroke="{Binding ElementName=lstFarben, Path=SelectedValue}"
Height="{Binding ElementName=slRadius, Path=Value}"
Width="{Binding ElementName=slRadius, Path=Value}"/>
<StackPanel Grid.Column="1" Grid.Row="2" >
<ComboBox x:Name="lstFarben">
<ComboBoxItem Name="cbi1" Content="#0061ff" />
<ComboBoxItem Name="cbi2" Content="#00ff04" />
<ComboBoxItem Name="cbi3" Content="#ff0019" />
</ComboBox>
<xctk:ColorCanvas Name="colorPicker" />
</StackPanel>
<Label Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2"
Content="{Binding ElementName=lstFarben, Path=SelectedValue}" Name="lblNameGross"/>
</Grid>
Here a Screenshot of the Error:
Screenshot
Since you are explicitly creating ComboBoxItems, the color value has to be retrieved from their Content property.
Set the SelectedValuePath property of the ComboBox:
<ComboBox x:Name="lstFarben" SelectedValuePath="Content">
Alternatively, get the color value directly from the selected item like this:
Stroke="{Binding ElementName=lstFarben, Path=SelectedItem.Content}"
I create a UserControl that contains a static image and I want to display it on my MainPage. However, the image only displays on my UserControl without displaying on MainPage.
This is my UserControl XAML:
<UserControl
x:Class="Example.Views.UserControls.Gift.GiftView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Example.Views.UserControls.Gift"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="RootLayout">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="90"/>
</Grid.RowDefinitions>
<Border Grid.Row="1" Background="#dedede">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" HorizontalAlignment="Stretch">
<Button.Template>
<ControlTemplate >
<Grid Background="{Binding FleetTabColor}">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Image Height="40" Width="40" Source="../Assets/Icon/unselect_gift.png" VerticalAlignment="Center" />
<TextBlock Foreground="Black" Margin="0" Grid.Row="1" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Gift"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Grid.Column="1" HorizontalAlignment="Stretch" >
<Button.Template>
<ControlTemplate >
<Grid Background="{Binding FleetTabColor}">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Image Height="40" Width="40" Source="../Assets/birthday.png" VerticalAlignment="Center" />
<TextBlock Foreground="Black" Margin="0" Grid.Row="1" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="BirthDay"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Grid.Column="2" HorizontalAlignment="Stretch">
<Button.Template>
<ControlTemplate >
<Grid Background="{Binding FleetTabColor}">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Image Height="40" Width="40" Source="../Assets/package.png" VerticalAlignment="Center" />
<TextBlock Foreground="Black" Margin="0" Grid.Row="1" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Package"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</StackPanel>
</Border>
</Grid>
</UserControl>
And this is my MainPage XAML:
<Page
x:Class="Example.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Example"
xmlns:menu="using:Example.Views.UserControls.Menu"
xmlns:popup="using:Example.Views.UserControls.Popup"
xmlns:giftview="using:Example.Views.UserControls.Gift"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="Root">
<Grid Background="#FFCFD4E2">
<Grid Visibility="Visible">
<giftview:GiftView x:Name="GiftViewTest" DataContext="{Binding GiftViewModel}"/>
</Grid>
</Grid>
</Grid>
</Page>
When I try to clear my project, the image will shows correctly on my MainPage Preview. But when I rebuild my project, it will disappears on my preview again.
How can I do this?
Almost certainly your image cannot be found at runtime.
You'll need to check your project outputs to make sure the assets are in the correct folder.
More than likely you should use resources to access the images: see this other stackoverflow question
Example User Control that works as expected:
<UserControl x:Class="WpfApp1.UserControl1"
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"
mc:Ignorable="d">
<StackPanel Orientation="Vertical">
<Button>
<Button.Template>
<ControlTemplate>
<Grid>
<Image Height="20" Width="40" Source="http://lorempixel.com/400/200/" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button>
<Button.Template>
<ControlTemplate>
<Grid>
<Image Height="20" Width="40" Source="sample-image.jpg" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
</UserControl>
Project:
Here is my code. I have tried several things to get the label in the top right hand corner of the popup and make it stay there, but nothing has worked.
Thanks for your help!
XAML:
<Window x:Class="ValidationWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:local="clr-namespace:ValidationWPF"
Title="MainWindow" mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="259" d:DesignWidth="420" SizeToContent="WidthAndHeight">
<Grid Height="129" Width="345">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="514*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0" />
<RowDefinition Height="251*" />
</Grid.RowDefinitions>
<Button Content="Errors" Height="23" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="75" Grid.Column="1" Grid.Row="1" Margin="132,12,0,0" MouseEnter="button1_MouseHover">
</Button>
<Popup AllowsTransparency="True" PlacementTarget="{Binding ElementName=button1}" StaysOpen="True" AllowDrop="True" Name="PopUp1" PopupAnimation="Scroll">
<Popup.Child>
<Border BorderBrush="White" BorderThickness="3, 3, 0, 0">
<Border BorderBrush="Black" BorderThickness="3, 3, 3, 3">
<TextBlock Background="Salmon">
<Label Background="AliceBlue" Foreground="Black" HorizontalAlignment="Stretch" HorizontalContentAlignment="Right" MouseDown="mouse_DownHandeled" AllowDrop="False" Margin="100,100,0,0">
x
</Label>
<local:ValidationUserControl/>
</TextBlock>
</Border>
</Border>
</Popup.Child>
</Popup>
</Grid>
</Window>
As you see, I have a popup with a label that has an X in it. The label is fully functional. Now I just need it to look like a normal popup with the label in the top right hand corner.
Try this:
<TextBlock Background="Salmon" MinWidth="150" MinHeight="150" VerticalAlignment="Top">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="120" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="1" Background="AliceBlue" Foreground="Black" VerticalAlignment="Top" AllowDrop="False">
X
</Label>
</Grid>
</TextBlock>
To display a WPF list box, I use a user control (MessageRowTemplate) as list box item. The user contrul uses a value converter (MessageTypeToBrushConverter). For some reason, the value converter is only trigered if the user control isn't used as list box item but seperate.
xaml-file with user control used seperately and inside a list box as list box item:
<local:MuuriWindow x:Class="Muuri_UI_WPFv3.Window_Conversation"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Muuri_UI_WPFv3"
Loaded="EventHandler_WindowLoaded">
<Window.Resources>
<DataTemplate x:Key="ResponsesListTemplate">
<local:MessageRowTemplate Margin="3" />
</DataTemplate>
<local:MessageTypeToBrushConverter x:Key="converter" />
</Window.Resources>
<StackPanel Orientation="Vertical">
<local:MessageRowTemplate x:Name="questionControl" />
<ListBox HorizontalAlignment="Stretch" ItemTemplate="{DynamicResource ResponsesListTemplate}" ItemsSource="{Binding}" Name="listBoxResponses" Height="200" ScrollViewer.VerticalScrollBarVisibility="Visible" Style="{StaticResource MuuriListboxStyle}" />
<StackPanel Orientation="Horizontal">
<Button Name="buttonReply" Click="EventHandler_ButtonReplyClicked">Reply</Button>
<Button Name="buttonCancel" Click="EventHandler_ButtonCancelClicked">Cancel</Button>
</StackPanel>
</StackPanel>
</local:MuuriWindow>
And here's the MessageRowTemplate.xaml:
<UserControl x:Class="Muuri_UI_WPFv3.MessageRowTemplate"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Muuri_UI_WPFv3"
Width="300"
Loaded="UserControl_Loaded">
<UserControl.Resources>
<local:MessageTypeToBrushConverter x:Key="converter" />
</UserControl.Resources>
<Grid Margin="2,1,2,1" VerticalAlignment="Top" Height="auto">
<Grid.RowDefinitions>
<RowDefinition Height="2" />
<RowDefinition Height="0.5*" />
<RowDefinition Height="0.5*" />
<RowDefinition Height="2" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Name="leftBorder" Margin="2,2,0,2" Grid.RowSpan="4" CornerRadius="3,0,0,3" Panel.ZIndex="1" Background="{Binding Path=Type, Converter={StaticResource converter}}" />
<Border Margin="0,0,0,0" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="4" Background="#FF666666" CornerRadius="0,5,5,0" />
<Border Margin="0,0,0,0" Grid.ColumnSpan="2" Grid.RowSpan="4" Background="{x:Null}" BorderThickness="2,2,2,2" BorderBrush="#FF202020" CornerRadius="5,5,5,5" Panel.ZIndex="0" />
<TextBlock Padding="5,2,5,2" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Text="{Binding Path=Text}" Grid.Row="1" Grid.Column="1" Foreground="White" />
<TextBlock Padding="5,2,5,2" HorizontalAlignment="Stretch" VerticalAlignment="Center" Text="{Binding Path=Author}" Grid.Row="2" Grid.Column="1" Foreground="White" />
</Grid>
</UserControl>
As you might guess, the value converter is responsible for converting some value to a brush. It works fine for this <local:MessageRowTemplate x:Name="questionControl" /> but not for the list box item.
Google didn't give me any hints for keyword combinations of 'list box', 'list box item', 'user control', 'value converter'.
Do you have an idea?
Thanks in advace.
The list box
<ListBox HorizontalAlignment="Stretch" ItemTemplate="{DynamicResource ResponsesListTemplate}" ItemsSource="{Binding}" Name="listBoxResponses" Height="200" ScrollViewer.VerticalScrollBarVisibility="Visible" Style="{StaticResource MuuriListboxStyle}" />
uses the local resource ResponsesListTemplat which again uses the MessageRowTemplate.
The converter is used within this template:
<UserControl.Resources>
<local:MessageTypeToBrushConverter x:Key="converter" />
</UserControl.Resources>
and applied to the first border-tag within the template.