I do not have an idea of how to make the menu bar, tool bar, and canvas fix their positions. While scrolling they shouldn't move.
I have a WPF window where I have a menu bar and a tool bar and two canvases.
Canvas 1 is in XAML and canvas 2 is dynamic through vb.net
Now I want to fix the first three.
Menu bar
Tool bar
Canvas 1
Here is my XAML:
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" >
<DockPanel>
<Grid ScrollViewer.HorizontalScrollBarVisibility="Visible" >
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="350"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Menu x:Name="menu1" BorderBrush="AliceBlue" VerticalAlignment="Top" FontFamily="Comic Sans MS" >
<MenuItem Header="_File" Width="92" FontSize="16" FontWeight="Normal" FontFamily="Century Gothic" >
<MenuItem Header="Location" FontSize="16">
<MenuItem Header="01" />
<MenuItem Header="02"/>
<MenuItem Header="03"/>
<MenuItem Header="04"/>
<MenuItem Header="05"/>
<MenuItem Header="06"/>
<MenuItem Header="07"/>
<MenuItem Header="08"/>
<MenuItem Header="09"/>
<MenuItem Header="10"/>
<MenuItem Header="11"/>
<MenuItem Header="12"/>
<MenuItem Header="13"/>
<MenuItem Header="14"/>
</MenuItem>
<MenuItem Header="_Print"/>
<MenuItem Header="_Print Preview"/>
<MenuItem Header="_Exit"/>
</MenuItem>
</Menu>
<ToolBar Grid.Row="1" x:Name="toolBar1" BorderBrush="Red" BorderThickness="3" Margin="0,0,0,900" Grid.RowSpan="2" Height="30" VerticalAlignment="Top" >
<Button x:Name="Zoomin" Click="menuItemZoomin_Click" HorizontalAlignment="Left" Margin="1" Width="90" FontSize="16" FontWeight="SemiBold" Height="55" RenderTransformOrigin ="0.917,0.587" IsHitTestVisible="True" IsEnabled="True" FontFamily="Century Gothic" Content="Zoom In" />
<Button x:Name="Zoomout" Click="menuItemZoomout_Click" HorizontalAlignment="Left" Margin="1" Width="90" FontSize="16" FontWeight="SemiBold" RenderTransformOrigin="0.917,0.587" Height="55" FontFamily="Century Gothic" Content="Zoom Out"/>
<Button x:Name="Print" Click="PrintBtn_Click" HorizontalAlignment="Left" Margin="1" Width="90" FontSize="16" FontWeight="SemiBold" RenderTransformOrigin="0.917,0.587" Height="55" FontFamily="Century Gothic" Content="Print"/>
</ToolBar>
<DockPanel>
<Canvas x:Name="cvsZoneColor" DockPanel.Dock="Top" >
<Rectangle Width="25" Height="25" Margin="60 60 60 950" >
<Rectangle.Fill>
<SolidColorBrush>
<SolidColorBrush.Color>
<Color A="219" R="219" G="249" B="217" />
</SolidColorBrush.Color>
</SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="A" Margin="60 80 60 950" Width="20" Height="20" ></TextBlock>
<Rectangle Width="25" Height="25" Margin="90 60 70 990" >
<Rectangle.Fill>
<SolidColorBrush>
<SolidColorBrush.Color>
<Color A="219" R="255" G="238" B="204" />
</SolidColorBrush.Color>
</SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="B" Margin="90 80 70 950" Width="20" Height="20" ></TextBlock>
<Rectangle Width="25" Height="25" Margin="120 60 70 990" >
<Rectangle.Fill>
<SolidColorBrush>
<SolidColorBrush.Color>
<Color A="219" R="204" G="238" B="255" />
</SolidColorBrush.Color>
</SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="C" Margin="120 80 70 950" Width="20" Height="20" ></TextBlock>
<Rectangle Width="25" Height="25" Margin="150 60 70 990" >
<Rectangle.Fill>
<SolidColorBrush>
<SolidColorBrush.Color>
<Color A="219" R="204" G="238" B="221" />
</SolidColorBrush.Color>
</SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="D" Margin="150 80 70 950" Width="20" Height="20" ></TextBlock>
<Rectangle Width="25" Height="25" Margin="180 60 70 990" >
<Rectangle.Fill>
<SolidColorBrush>
<SolidColorBrush.Color>
<Color A="219" R="255" G="221" B="238" />
</SolidColorBrush.Color>
</SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="E" Margin="180 80 70 950" Width="20" Height="20" ></TextBlock>
<Rectangle Width="25" Height="25" Margin="210 60 70 990" >
<Rectangle.Fill>
<SolidColorBrush>
<SolidColorBrush.Color>
<Color A="219" R="255" G="238" B="255" />
</SolidColorBrush.Color>
</SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="F" Margin="210 80 70 950" Width="20" Height="20" ></TextBlock>
</Canvas>
</DockPanel>
<Canvas x:Name="cvsWarehouse" Focusable="True" ScrollViewer.CanContentScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible" MouseWheel="Canvas_MouseWheel" Grid.Row="3" RenderTransformOrigin="0.5,0.5" Margin="0,150,0,0" >
<Canvas.LayoutTransform>
<TransformGroup>
<ScaleTransform x:Name ="st1" ScaleX="{Binding Value, ElementName=uiScaleSlider}"
ScaleY="{Binding Value, ElementName=uiScaleSlider}" />
<TranslateTransform Y="100" />
</TransformGroup>
</Canvas.LayoutTransform>
</Canvas>
</Grid>
</DockPanel>
</ScrollViewer>
Scrolling the bar on the right hand side shouldn't move these three highlighted ...
Image
While using DockPanel, it's important to keep note of order.
You should use below XAML as your starting point and modify it for your needs :
<Window ...>
<DockPanel LastChildFill="True">
<Menu x:Name="menu1" BorderBrush="AliceBlue" VerticalAlignment="Top" FontFamily="Comic Sans MS" DockPanel.Dock="Top">
<MenuItem Header="_File" Width="92" FontSize="16" FontWeight="Normal" FontFamily="Century Gothic" >
<MenuItem Header="Location" FontSize="16">
<MenuItem Header="01" />
<MenuItem Header="02"/>
<MenuItem Header="03"/>
<MenuItem Header="04"/>
<MenuItem Header="05"/>
<MenuItem Header="06"/>
<MenuItem Header="07"/>
<MenuItem Header="08"/>
<MenuItem Header="09"/>
<MenuItem Header="10"/>
<MenuItem Header="11"/>
<MenuItem Header="12"/>
<MenuItem Header="13"/>
<MenuItem Header="14"/>
</MenuItem>
<MenuItem Header="_Print"/>
<MenuItem Header="_Print Preview"/>
<MenuItem Header="_Exit"/>
</MenuItem>
</Menu>
<ToolBar x:Name="toolBar1" BorderBrush="Red" BorderThickness="3" Height="30" VerticalAlignment="Top" DockPanel.Dock="Top">
<Button x:Name="Zoomin" Click="menuItemZoomin_Click" HorizontalAlignment="Left" Margin="1" Width="90" FontSize="16" FontWeight="SemiBold" Height="55" RenderTransformOrigin ="0.917,0.587" IsHitTestVisible="True" IsEnabled="True" FontFamily="Century Gothic" Content="Zoom In" />
<Button x:Name="Zoomout" Click="menuItemZoomout_Click" HorizontalAlignment="Left" Margin="1" Width="90" FontSize="16" FontWeight="SemiBold" RenderTransformOrigin="0.917,0.587" Height="55" FontFamily="Century Gothic" Content="Zoom Out"/>
<Button x:Name="Print" Click="PrintBtn_Click" HorizontalAlignment="Left" Margin="1" Width="90" FontSize="16" FontWeight="SemiBold" RenderTransformOrigin="0.917,0.587" Height="55" FontFamily="Century Gothic" Content="Print"/>
</ToolBar>
<Canvas Background="Pink" DockPanel.Dock="Bottom" Height="25">
<TextBlock Text="Bottom"/>
</Canvas>
<ScrollViewer>
<Canvas Background="Red" ScrollViewer.VerticalScrollBarVisibility="Visible">
<Button Content="Press"/>
</Canvas>
</ScrollViewer>
</DockPanel>
</Window>
I think this might get you a UI closer to what it looks like you are trying to do. If you make the XAML to use the dock panel more, you can get a more fixed UI.
<DockPanel LastChildFill="True">
<Menu x:Name="menu1" DockPanel.Dock="Top">
<MenuItem Header="_File" >
...
</Menu>
<ToolBar x:Name="toolBar1" DockPanel.Dock="Top">
...
</ToolBar>
<Grid x:Name="cvsZoneColor" DockPanel.Dock="Top">
<StackPanel Orientation="Vertical">
<Rectangle Width="25" Height="25" Margin="60 0 60 0" >
...
</Rectangle>
<TextBlock Text="A" Margin="60 0 60 0" Width="20" Height="20"/>
</StackPanel>
...
</Grid>
<ScrollViewer DockPanel.Dock="Bottom">
<Canvas x:Name="cvsWarehouse">
...
</Canvas>
</ScrollViewer>
</DockPanel>
Related
I use LibVLCSharp.WPF in a WPF application.
I want to put some icons and buttons above the video.
But after the VideoView control has loaded, it overwrite everything.
<Canvas Width="325" Height="182">
<Image Source="/Resource/BgLoading_1.png"
Width="325"
Height="182"
Stretch="Fill"
StretchDirection="Both"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Panel.ZIndex="0"
Visibility="Visible" />
<fa:ImageAwesome Foreground="White"
Icon="Spinner"
Spin="True"
Height="48"
Width="48"
Visibility="{Binding LoadImageStatus}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Canvas.Left="139"
Canvas.Top="67" />
<Image x:Name="imgLeftIcon"
Width="30"
Height="30"
Source="{Binding LeftIconSource}"
Stretch="Fill"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,10,10"
Visibility="{Binding LeftIconStatus}"
Panel.ZIndex="2" />
<Image x:Name="imgRightIcon"
Width="30"
Height="30"
Source="{Binding RightIconSource}"
Stretch="Fill"
Margin="285,10,10,142"
Visibility="{Binding RightIconStatus}"
Panel.ZIndex="2" />
<!--Video-->
<vlc:VideoView Grid.Row="0"
Height="182"
Width="325"
Visibility="{Binding VideoPlayerStatus}"
Panel.ZIndex="1" />
</Canvas>
RTFM
The controls that must appear on top of the video should be placed as children of the VideoView element.
<Window ...
xmlns:vlc="clr-namespace:LibVLCSharp.WPF;assembly=LibVLCSharp.WPF"
...>
<Grid>
<vlc:VideoView x:Name="VideoView">
<Button x:Name="PlayButton"
Click="PlayButtonOnClick"
Content="Play"
Margin="8"
HorizontalAlignment="Right"
VerticalAlignment="Bottom" />
</vlc:VideoView>
</Grid>
</Window>
Avoid Canvas since they are pretty dumb.
Working example sources based on the manual.
I haven't used vlc, if it covers the icons, I think it should be a window drawn with a separate handle. just like WindowsFormHost. try use Popup control, it can be displayed on top of any control.
<Grid>
<!--video control-->
<Grid Name="video">
<!--Video-->
<vlc:VideoView Grid.Row="0"
Height="182"
Width="325"
Visibility="{Binding VideoPlayerStatus}"
Panel.ZIndex="1" />
</Grid>
<Popup PlacementTarget="{Binding ElementName=video}" Placement="Center">
<Grid>
<Image x:Name="imgLeftIcon"
Width="30"
Height="30"
Source="{Binding LeftIconSource}"
Stretch="Fill"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,10,10"
Visibility="{Binding LeftIconStatus}"
Panel.ZIndex="2" />
</Grid>
</Popup>
</Grid>
I have a problem with icons.
In the edit mode, they are displayed and you cannot see them after starting the program.
I put in a different colored icon and it actually worked.
I don't know why this is happening with white icons.
I've been working on it for several hours and I don't know, will anyone help?
enter image description here
enter image description here
<Window x:Class="Projekt.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:Projekt"
mc:Ignorable="d"
Title="Kadry i płace Sputnik 2021" Height="450" Width="800">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9*"/>
<ColumnDefinition Width="11*"/>
</Grid.ColumnDefinitions>
<DockPanel Grid.ColumnSpan="2">
<Menu DockPanel.Dock="Top" Height="20">
<Menu.Background>
<SolidColorBrush>#457b9d</SolidColorBrush>
</Menu.Background>
<MenuItem Header="_Opcje" Foreground="#f1faee">
<MenuItem Header="Kadry" Foreground="Black"/>
<MenuItem Header="Płace" Foreground="Black"/>
<MenuItem Header="Właściciele" Foreground="Black"/>
<Separator/>
<MenuItem Header="Przelew do ZUS"/>
<Separator/>
<MenuItem Header="Przypomnij"/>
</MenuItem>
<MenuItem Header="_Inne" Foreground="#f1faee">
<MenuItem Header="Przelogowanie"/>
<MenuItem Header="Ustawienie"/>
<MenuItem Header="Kalkulator"/>
<MenuItem Header="Wygląd"/>
<MenuItem Header="Pobranie Podręcznika"/>
</MenuItem>
<MenuItem Header="_Pomoc" Foreground="#f1faee">
<MenuItem Header="Pomoc na temat"/>
<MenuItem Header="Co nowego"/>
<MenuItem Header="Kalkulator"/>
<Separator/>
<MenuItem Header="Powiadomienia"/>
<Separator/>
<MenuItem Header="O programie"/>
</MenuItem>
</Menu>
<StackPanel DockPanel.Dock ="Left" Width="130" Background="#457b9d">
<Grid Height="1" Background="White"></Grid>
<Grid Height="19"></Grid>
<ListView BorderBrush="Transparent" Background="#457b9d">
<ListViewItem Height="30">
<StackPanel Orientation="Horizontal">
<Image Source="/Source/Icons/List_View_place.png"/>
<TextBlock Text="Kadry" Margin="15 0 0 0" FontFamily="Candara" Foreground="White" VerticalAlignment="Center"/>
</StackPanel>
</ListViewItem>
<ListViewItem Height="30">
<StackPanel Orientation="Horizontal">
<Image Source="/Source/Icons/List_View_Kadry.png"/>
<TextBlock Text="Płace" Margin="15 0 0 0" FontFamily="Candara" Foreground="White" VerticalAlignment="Center"/>
</StackPanel>
</ListViewItem>
<ListViewItem Height="30">
<StackPanel Orientation="Horizontal">
<Image Source="/Source/Icons/List_View_wlasciciele.png"/>
<TextBlock Text="Właściciele" Margin="15 0 0 0" FontFamily="Candara" Foreground="White" VerticalAlignment="Center"/>
</StackPanel>
</ListViewItem>
<ListViewItem Height="30">
<StackPanel Orientation="Horizontal">
<Image Source="/Source/Icons/List_View_zus.png"/>
<TextBlock Text="Przedlew ZUS" Margin="15 0 0 0" FontFamily="Candara" Foreground="White" VerticalAlignment="Center"/>
</StackPanel>
</ListViewItem>
</ListView>
<Grid Height="140"></Grid>
<ListView BorderBrush="Transparent" Background="#457b9d">
<ListViewItem>
<StackPanel Orientation="Horizontal">
<Image Source="/Source/Icons/List_View_użytkownik.png" />
<TextBlock Text="Firma" Margin="15 0 0 0" FontFamily="Candara" Foreground="White" VerticalAlignment="Center"/>
</StackPanel>
</ListViewItem>
<ListViewItem>
<StackPanel Orientation="Horizontal">
<Image Source="/Source/Icons/List_View_administrator.png" />
<TextBlock Text="Administrator" Margin="15 0 0 0" FontFamily="Candara" Foreground="White" VerticalAlignment="Center"/>
</StackPanel>
</ListViewItem>
<ListViewItem>
<StackPanel Orientation="Horizontal">
<Image Source="/Source/Icons/List_View_kalendarz.png" />
<TextBlock Text="Kalendarz" Margin="15 0 0 0" FontFamily="Candara" Foreground="White" VerticalAlignment="Center"/>
</StackPanel>
</ListViewItem>
</ListView>
<Grid Height="1" Background="white"></Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0 5 0 0">
<ListView BorderBrush="Transparent" Background="#457b9d">
<ListViewItem Margin="0 0 10 0">
<Image Source="/Source/Icons/List_View_ustawienia.png" Height="25" />
</ListViewItem>
</ListView>
<ListView BorderBrush="Transparent" Background="#457b9d">
<ListViewItem>
<Image Source="/Source/Icons/List_View_wyjscie.png" Height="25" />
</ListViewItem>
</ListView>
</StackPanel>
</StackPanel>
<StackPanel>
</StackPanel>
</DockPanel>
</Grid>
In the properties panel of your image in VisualStudio, you need to change the Build Action property to Resource.
Example image link
This is my custom title bar:
That three dot button is a button control. I want to create a menu like this (drew by paint!):
But I don't have any idea. I know there is a "Menu" control but I couldn't use it as I wanted.
"More" button code:
<Button x:Name="More" Grid.Column="1" Style="{DynamicResource TitleBarButton}" IsTabStop="False" Focusable="False">
<Button.Background>
<ImageBrush ImageSource="icons/More.png"/>
</Button.Background>
</Button>
You may replace the Button with a ToggleButton and use a Popup that you bind to the ToggleButton's IsChecked property:
<ToggleButton x:Name="More" Grid.Column="1" Style="{DynamicResource TitleBarButton}" IsTabStop="False" Focusable="False">
<ToggleButton.Background>
<ImageBrush ImageSource="icons/More.png"/>
</ToggleButton.Background>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=More}"
PlacementTarget="{Binding ElementName=More}"
Placement="Bottom">
<StackPanel Width="100" Background="Yellow">
<TextBlock Text="Check For Updates" />
<Grid Background="DarkGray" Height="3" />
<TextBlock Text="Do something else" />
</StackPanel>
</Popup>
You may of course replace the contents of the Popup with whatever you want.
enter image description here
You may need setup menu items to act as buttons
(more WPF button feature int this book)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="40" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Green">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.0*" />
<ColumnDefinition Width="40" />
<ColumnDefinition Width="40" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" >
<Menu Height="40" Width="40" Background="Green" >
<MenuItem >
<!-- MENU HEADER -->
<MenuItem.Header>
<Border>
<Image Source="/WpfMenuButton;component/Images/DotsImg.PNG" />
</Border>
</MenuItem.Header>
<!-- MENU ITEM UPDATE -->
<MenuItem Click="CheckUpdate_Click" Background="Chocolate">
<MenuItem.Header>
<TextBlock Text="Check for update" VerticalAlignment="Center" HorizontalAlignment="Center"
Height="30" Width="100" />
</MenuItem.Header>
</MenuItem>
<!-- MENU ITEM WIFI -->
<MenuItem Click="DoSomethingElse_Click" Background="LightGreen">
<MenuItem.Header>
<TextBlock Text="Do something else" VerticalAlignment="Center"
HorizontalAlignment="Center" Height="30" Width="140" />
</MenuItem.Header>
</MenuItem>
<!-- MENU ITEM ABOUT -->
<MenuItem Click="MenuAbout_Click" Background= "LightBlue">
<MenuItem.Header>
<TextBlock Text="About" VerticalAlignment="Center" HorizontalAlignment="Center"
Height="30" Width="140" />
</MenuItem.Header>
</MenuItem>
</MenuItem>
</Menu>
</Grid>
<Grid Grid.Column="2" >
<Button Content="-" Foreground="White" FontSize="28" Background="Green"/>
</Grid>
<Grid Grid.Column="3" >
<Button Content="X" Foreground="White" FontSize="28" Background="Green"/>
</Grid>
</Grid>
</Grid>
I have 3 regions namely Menu,Toolbar and Content. When a module(ie customer) is clicked in Menu view it will navigate to the respective view in content region, after editing the values in the textboxes I need to save that to DB. How to get the underlaying view model of the active view and send to DAL when save button is clicked in Toolbar view?.
Shell.xaml:
<Grid DockPanel.Dock="Left" Width="65" Margin="1">
<Border CornerRadius="1" BorderBrush="Black" BorderThickness="1">
<StackPanel Orientation="Vertical" Margin="1" >
<ContentControl Name="menuControl" PrismRegions:RegionManager.RegionName="{x:Static infra:RegionNames.MenuRegion}"/>
</StackPanel>
</Border>
</Grid>
<Grid DockPanel.Dock="Top" Margin="1">
<Border CornerRadius="1" BorderBrush="Black" BorderThickness="1" >
<StackPanel Orientation="Vertical" Margin="2">
<ContentControl Name="toolbarControl" PrismRegions:RegionManager.RegionName="{x:Static infra:RegionNames.ToolbarRegion}"/>
</StackPanel>
</Border>
</Grid>
<Grid DockPanel.Dock="Right" Margin="2">
<Border CornerRadius="1" BorderBrush="Black" BorderThickness="1">
<StackPanel Margin="5" >
<ContentControl Name="contentControl" DockPanel.Dock="Top" PrismRegions:RegionManager.RegionName="{x:Static infra:RegionNames.ContentRegion}"/>
</StackPanel>
</Border>
</Grid>
Menu.xaml:
<Button Grid.Row="0" Name="btnHome" Background="Transparent" Margin="1" ToolTip="Home" Command="{x:Static inf:ApplicationCommands.NavigationCommand}" CommandParameter="{x:Type mod:HomeView}">
<TextBlock Height="32" Width="32" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/home_32.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
<Button Grid.Row="1" Name="btnBank" Background="Transparent" Margin="1" ToolTip="Bank" Command="{x:Static inf:ApplicationCommands.NavigationCommand}" CommandParameter="{x:Type mod:BankView}">
<TextBlock Height="32" Width="32" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/bank_64.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
<Button Grid.Row="2" Name="btnCustomer" Background="Transparent" Margin="1" ToolTip="Customer" Command="{x:Static inf:ApplicationCommands.NavigationCommand}" CommandParameter="{x:Type mod:CustomerView}">
<TextBlock Height="32" Width="32" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/customer_128.ico"/>
</TextBlock.Background>
</TextBlock>
</Button>
<Button Grid.Row="3" Name="btnEmployee" Background="Transparent" Margin="1" ToolTip="Employee" Command="{x:Static inf:ApplicationCommands.NavigationCommand}" CommandParameter="{x:Type mod:EmployeeView}">
<TextBlock Height="32" Width="32" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/employee_128.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
Toolbar.xaml:
<Button Grid.Column="0" Margin="1" Name="btnAdd" Height="35" Width="35" ToolTip="Add" Background="Transparent" Command="{Binding AddCommand}" CommandParameter="Add" >
<TextBlock Height="30" Width="30" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/plus_32.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
<Button Grid.Column="1" Margin="1" Name="btnEdit" Height="35" Width="35" ToolTip="Edit" Background="Transparent" Command="{Binding EditCommand}" CommandParameter="Edit" >
<TextBlock Height="30" Width="30" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/pencil_32.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
<Button Grid.Column="2" Margin="1" Name="btnSave" Height="35" Width="35" ToolTip="Save" Background="Transparent" Command="{Binding SaveCommand}" CommandParameter="Save" >
<TextBlock Height="30" Width="30" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/save_32.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
<Button Grid.Column="3" Margin="1" Name="btnPrint" Height="35" Width="35" ToolTip="Print" Background="Transparent" Command="{Binding PrintCommand}" CommandParameter="Print" >
<TextBlock Height="30" Width="30" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/print_32.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
UI Design:
Basically your view's state is entirely present in the viewmodel. In your scenario of Button being out side the viewmodel of the form to save what you can do is:
In tool bar viewmodel:
Raise an event that Save button is clicked
myEventAggregator.RaiseEvent<SaveButtonClicked>().Publish(args);
On viewmodel constructor:
subscribe for the event that you raise when you click on save button in toolbar region
myEventAggregator.GetEvent<SaveButtonClicked>().Subscribe(yourSubscriberDelegate);
On Exit of the form or cancel of form:
Unsubscribe for the event. (this makes sure you don't have multiple active forms saving the data at the same time)
myEventAggregator.GetEvent<SaveButtonClicked>().UnSubscribe(yourSubscriberDelegate);
For this you need Event aggregator knowledge of publish and subscribe. Find more details here
No matter what I do I cant make the line extent to the bottom of the scrollview :(
<Grid>
<DockPanel
HorizontalAlignment="Stretch"
Name="dock"
VerticalAlignment="Stretch"
LastChildFill="True"
Focusable="True">
<Menu
Name="menuBar"
HorizontalContentAlignment="Stretch"
BorderThickness="0,0,0,1"
BorderBrush="Silver"
VerticalAlignment="Top"
DockPanel.Dock="Top">
<MenuItem
Header="File" />
<MenuItem
Header="Options">
<MenuItem
Header="Personal Info" />
</MenuItem>
<MenuItem
Header="View" />
<MenuItem
Header="About" />
</Menu>
<TextBox
Name="txtInput"
DockPanel.Dock="Bottom"
Height="23"
SpellCheck.IsEnabled="True"
VerticalAlignment="Bottom"
BorderThickness="1,2,1,1"
KeyDown="txtInput_KeyDown"
TabIndex="1" />
<ListBox
Name="lstUsers"
ItemsSource="{Binding}"
DockPanel.Dock="Right"
Width="160"
BorderThickness="2,0,0,0"
BorderBrush="LightGray" />
<ScrollViewer
Name="lstMessagesScroll"
VerticalScrollBarVisibility="Auto">
<ItemsControl
Name="lstMessages"
ItemsSource="{Binding}"
VerticalAlignment="Bottom" />
</ScrollViewer>
</DockPanel>
<Line
StrokeThickness="0.5"
X1="116"
X2="116"
Y1="23"
Stroke="Gainsboro"
Y2="{Binding ElementName=lstMessagesScroll, Path=ActualHeight}" />
</Grid>
Any tips?
In playing around with your XAML I found that if you bind the Height to same element and set Y1 to 0 it will act the way that I believe you are expecting.
<Line
StrokeThickness="0.5"
X1="116"
X2="116"
Y1="0"
Stroke="Gainsboro"
Y2="{Binding ElementName=lstMessagesScroll, Path=ActualHeight }"
Height="{Binding ElementName=lstMessagesScroll, Path=ActualHeight }" />
It's working correctly - it's just that you are not taking the Menu into the account.