I have a context menu that I would like to add a few controls too. In the example below I'm adding a TextBox,CheckBox and a Slider.
<ContextMenu>
<MenuItem Header="Cut"
Command="Cut" />
<MenuItem Header="Copy"
Command="Copy" />
<MenuItem Header="Paste"
Command="Paste" />
<Separator />
<Border Background="#999"
BorderThickness="1"
BorderBrush="Black"
Padding="5">
<Grid Width="300">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="8" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Label Content="PropA"
Grid.Column="0"
Grid.Row="0" />
<Label Content="PropB"
Grid.Column="0"
Grid.Row="1" />
<Label Content="PropC"
Grid.Column="0"
Grid.Row="2" />
<TextBox Text="-10"
Grid.Column="2"
Grid.Row="0" />
<CheckBox Grid.Column="2"
Grid.Row="1" />
<Slider Grid.Column="2"
Grid.Row="2" />
</Grid>
</Border>
</ContextMenu>
Which results in :
Is there anyway to get this to look better though?
Can I disable the Selectable blue border (shown in red) around the MenuItem ?
Can I stretch the controls to fit the Menu?
Your Border is wrapped in MenuItem. What you could do is use MenuItem and move Border to be its template
<ContextMenu>
<MenuItem Header="Cut" Command="Cut" />
<MenuItem Header="Copy" Command="Copy" />
<MenuItem Header="Paste" Command="Paste" />
<Separator />
<MenuItem>
<MenuItem.Template>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border Background="#999" BorderThickness="1" BorderBrush="Black" Padding="5">
<Grid Width="300">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="8" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Label Content="PropA" Grid.Column="0" Grid.Row="0" />
<Label Content="PropB" Grid.Column="0" Grid.Row="1" />
<Label Content="PropC" Grid.Column="0" Grid.Row="2" />
<TextBox Text="-10" Grid.Column="2" Grid.Row="0" />
<CheckBox Grid.Column="2" Grid.Row="1" />
<Slider Grid.Column="2" Grid.Row="2" />
</Grid>
</Border>
</ControlTemplate>
</MenuItem.Template>
</MenuItem>
</ContextMenu>
Related
I'm implementing a NavigationView like described is this topic.
Between the nav items (NavigationViewItem) I need to add a simple button, that will just execute an action, it will not navigate anywhere.
Every control I add to nav receives the property to stay selected when clicked, but I need a control that doesn't deselect the current nav, just execute an action.
Does anyone know how to do this or can suggest a solution? Grateful.
but I need a control that doesn't deselect the current nav, just execute an action.
Sure, you could edit the default NavigationView style and insert button into PaneContentGrid, and you could get default NavigationView style from generic.xaml file, then find PaneContentGrid add button like the following (InsertButton).
<SplitView.Pane>
<Grid x:Name="PaneContentGrid" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.LeftPaneVisibility}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="0" />
<!-- above button margin + back button space -->
<RowDefinition x:Name="PaneContentGridToggleButtonRow" Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="8" />
<!-- above list margin -->
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="8" />
</Grid.RowDefinitions>
<Grid x:Name="ContentPaneTopPadding" Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPadding}" />
<Grid Grid.Row="2" Height="{StaticResource PaneToggleButtonHeight}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{ThemeResource PaneToggleButtonWidth}" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentControl
x:Name="PaneHeaderContentBorder"
Grid.Column="1"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
IsTabStop="False" />
</Grid>
<Grid
x:Name="AutoSuggestArea"
Grid.Row="3"
Height="{ThemeResource NavigationViewTopPaneHeight}"
VerticalAlignment="Center">
<ContentControl
x:Name="PaneAutoSuggestBoxPresenter"
Margin="{ThemeResource NavigationViewAutoSuggestBoxMargin}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Center"
IsTabStop="False" />
<Button
x:Name="PaneAutoSuggestButton"
Width="{TemplateBinding CompactPaneLength}"
Style="{ThemeResource NavigationViewPaneSearchButtonStyle}"
Visibility="Collapsed" />
</Grid>
<ContentControl
x:Name="PaneCustomContentBorder"
Grid.Row="4"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
IsTabStop="False" />
<!-- Left nav list -->
<NavigationViewList
x:Name="MenuItemsHost"
Grid.Row="6"
Margin="0,0,0,20"
HorizontalAlignment="Stretch"
IsItemClickEnabled="True"
ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}"
ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}"
ItemTemplate="{TemplateBinding MenuItemTemplate}"
ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}"
SelectedItem="{TemplateBinding SelectedItem}"
SelectionMode="Single"
SingleSelectionFollowsFocus="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SingleSelectionFollowsFocus}" />
<ContentControl
x:Name="FooterContentBorder"
Grid.Row="7"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
IsTabStop="False" />
<Button Grid.Row="7" Content="Command" x:Name="InsertButton"/>
<NavigationViewItem
x:Name="SettingsNavPaneItem"
Grid.Row="8"
Icon="Setting" />
</Grid>
</SplitView.Pane>
If you don't want to edit style, you could also insert button into NavigationView PaneFooter like following
<NavigationView x:Name="nvSample">
<NavigationView.MenuItems>
<NavigationViewItem
Content="Menu Item1"
Icon="Play"
Tag="SamplePage1" />
<NavigationViewItem
Content="Menu Item2"
Icon="Save"
Tag="SamplePage2" />
<NavigationViewItem
Content="Menu Item3"
Icon="Refresh"
Tag="SamplePage3" />
<NavigationViewItem
Content="Menu Item4"
Icon="Download"
Tag="SamplePage4" />
</NavigationView.MenuItems>
<Frame x:Name="contentFrame" />
<NavigationView.PaneFooter>
<Button Content="Click"/>
</NavigationView.PaneFooter>
</NavigationView>
once again after hours of struggle with WPF I need your awesome help.
I have read many different StackOverflows, nonetheless, I cannot seem to get my current situation working and I don't understand why. I have chosen to use a Grid in contrast to a DockPanel and I would like to keep it that way as well. According to what I have read the row definitions are ok, the second row of the template grid should automatically stretch. Unfortunately it does not, as it seems that the last row of the grid does not move away.
This is how my window looks at the moment:
As you can see is the blue row not at the bottom of the window. In fact, the window should not be that long in the first place.
This is the code snippet of my Generic.xaml file that is relevant to the problem.
The way it works is, that I have a Skin with a custom control group:
<!-- Window START-->
<ControlTemplate x:Key="WindowTemplate" TargetType="{x:Type Window}">
<Border BorderBrush="LightGray" BorderThickness="1" Background="Red" Padding="0" VerticalAlignment="Stretch">
<Grid x:Name="WindowRoot" Margin="0" VerticalAlignment="Top" Background="Blue" MouseDown="Window_MouseDown">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="25"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<!-- HEADER START-->
<Frame x:Name="header_background" Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="0" Background="#ddd" BorderThickness="0 0 0 1" BorderBrush="#c9c9c9"/>
<Image x:Name="LogoICon" Source="/MTApp;component/Resources/Icon.png" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Left" Margin="10 8"/>
<Label x:Name="windowTitle" Grid.ColumnSpan="2" Content="{TemplateBinding Title}" VerticalAlignment="Center" Foreground="#393939" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" FontFamily="Segoe UI Regular" FontSize="12"/>
<Grid Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35"/>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="19"/>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="20" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Button x:Name="minimizeBtn" Content="0" FontFamily="Marlett" Foreground="#393939" Background="Transparent" BorderThickness="0" Grid.Row="1" Grid.Column="1" Margin="3 0 0 0" Click="minimizeBtn_Click"/>
<Button x:Name="maximizeBtn" Content="2" FontFamily="Marlett" Foreground="#393939" Background="Transparent" BorderThickness="0" Grid.Row="1" Grid.Column="2" Margin="3 0 0 0" Click="maximizeBtn_Click"/>
<Button x:Name="quitBtn" Content="r" FontFamily="Marlett" Foreground="#393939" Background="Transparent" BorderThickness="0" Grid.Row="1" Grid.Column="3" Margin="3 0 0 0" Click="quitBtn_Click"/>
</Grid>
<!-- HEADER END-->
<!-- CONTENT START-->
<ContentPresenter Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="1" Height="Auto"/>
<!-- CONTENT END-->
<!-- FOOTER START-->
<Border x:Name="footer_background" Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="2" Height="25">
<ResizeGrip />
</Border>
<!-- FOOTER END-->
</Grid>
</Border>
</ControlTemplate>
<!-- Window END-->
<Style x:Key="LightSkin_0_1" TargetType="Window">
<Setter Property="WindowStyle" Value="None" />
<Setter Property="AllowsTransparency" Value="True" />
<Setter Property="ResizeMode" Value="CanResizeWithGrip" />
<Setter Property="Template" Value="{StaticResource WindowTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding WindowState}" Value="Maximized">
</DataTrigger>
</Style.Triggers>
</Style>
And my MainWindow.xaml is:
<Window x:Class="UHashIt.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:UHashIt"
mc:Ignorable="d"
Title="Window title"
WindowStartupLocation="CenterScreen"
MinHeight="275"
MinWidth="700"
Width="700"
Style="{DynamicResource LightSkin_0_1}">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Menu -->
<Border VerticalAlignment="Top" Padding="5" Background="#f2f2f2" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" BorderThickness="0 0 0 1" BorderBrush="LightGray">
<DockPanel >
<Menu DockPanel.Dock="Left">
<MenuItem Header="File">
<MenuItem Header="Add File" />
<MenuItem Header="Export.." />
<Separator />
<MenuItem Header="Close"/>
</MenuItem>
<MenuItem Header="Help">
<MenuItem Header="Online Documentation" />
<MenuItem Header="About"/>
</MenuItem>
</Menu>
</DockPanel>
</Border>
<!-- Menu End -->
<!-- Content -->
<Grid Grid.Row="1" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="150*"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="150*"/>
<ColumnDefinition Width="25"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="40" />
<RowDefinition Height="30" />
<RowDefinition Height="40" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Label Style="{DynamicResource headline4}" Content="File 1" Grid.Row="0" Grid.Column="1"/>
<TextBox Grid.Row="1" Style="{DynamicResource NormalTextBox}" Grid.Column="1"/>
<Button Grid.Column="2" Grid.Row="1" Style="{DynamicResource CommonButton}" Height="30" Width="30" VerticalAlignment="Top"/>
<Label Style="{DynamicResource headline5}" Grid.Row="1" Grid.Column="3"/>
<Label Style="{DynamicResource headline4}" Content="File 2" Grid.Row="2" Grid.Column="1"/>
<TextBox Grid.Row="3" Style="{DynamicResource NormalTextBox}" Grid.Column="1"/>
<Button Grid.Column="2" Grid.Row="3" Style="{DynamicResource CommonButton}" Height="30" Width="30" VerticalAlignment="Top"/>
<Label Style="{DynamicResource headline5}" Grid.Row="3" Grid.Column="3"/>
<!-- Hash Button and Selection -->
<ComboBox Grid.Row="4" Grid.Column="1" HorizontalAlignment="Left" Width="200" Height="30">
<ComboBoxItem>
Please Choose Your Algorithm
</ComboBoxItem>
</ComboBox>
<Button Grid.Column="1" Grid.Row="4" Style="{DynamicResource ActionBtn}" Content="Button" HorizontalAlignment="Right"/>
<!-- End-->
</Grid>
<!-- Content End-->
</Grid>
I cannot explain myself why the "blue bar" is not attached to the bottom. Despite the fact, that the window is so big.
I think you want to change this:
<Grid x:Name="WindowRoot" Margin="0" VerticalAlignment="Top" Background="Blue" MouseDown="Window_MouseDown">
to this:
<Grid x:Name="WindowRoot" Margin="0" VerticalAlignment="Stretch" Background="Blue" MouseDown="Window_MouseDown">
This is my control with my custom DataTemplateSelector:
<m:Map x:Name="MainMap">
<m:MapItemsControl
ItemsSource="{Binding Source={StaticResource WorkLayerData}}">
<m:MapItemsControl.ItemTemplate>
<DataTemplate>
<Mobile:DevicePushpinTemplateSelector
m:MapLayer.Position="{Binding Location}"
ZoomLevel="{Binding ZoomLevel, ElementName=MainMap}"
Content="{Binding}">
<Mobile:DevicePushpinTemplateSelector.DotTemplate>
<DataTemplate>
<Ellipse Width="8" Height="8" Stroke="Black" Fill="{Binding IsGPSDataRecent, Converter={StaticResource BoolToGreenRedBrushConverter}}" StrokeThickness="1" />
</DataTemplate>
</Mobile:DevicePushpinTemplateSelector.DotTemplate>
<Mobile:DevicePushpinTemplateSelector.NumberedTemplate>
<DataTemplate>
<Border x:Name="border" Background="{Binding IsGPSDataRecent, Converter={StaticResource BoolToGreenRedBrushConverter}}" BorderBrush="Black" BorderThickness="2" Padding="2" Height="20" CornerRadius="8">
<TextBlock VerticalAlignment="Center" Text="{Binding DisplayId}" />
</Border>
</DataTemplate>
</Mobile:DevicePushpinTemplateSelector.NumberedTemplate>
<Mobile:DevicePushpinTemplateSelector.DetailedTemplate>
<DataTemplate>
<Border Background="{Binding IsGPSDataRecent, Converter={StaticResource BoolToGreenRedBrushConverter}}" BorderBrush="Black" BorderThickness="1" Padding="2" CornerRadius="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="Id:" FontWeight="Bold" />
<TextBlock Text="{Binding DisplayId}" Grid.Column="1" />
<TextBlock Text="Device Id:" FontWeight="Bold" Grid.Row="1" />
<TextBlock Text="{Binding DeviceId}" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="Speed:" FontWeight="Bold" Grid.Row="2" />
<TextBlock Text="{Binding Speed}" Grid.Row="2" Grid.Column="1" />
<TextBlock Text="Location:" FontWeight="Bold" Grid.Row="3" />
<TextBlock Text="{Binding Location}" Grid.Row="3" Grid.Column="1" />
<Button Content="View Details" Grid.Row="4" Grid.ColumnSpan="2" />
</Grid>
</Border>
</DataTemplate>
</Mobile:DevicePushpinTemplateSelector.DetailedTemplate>
</Mobile:DevicePushpinTemplateSelector>
</DataTemplate>
</m:MapItemsControl.ItemTemplate>
</m:MapItemsControl>
</m:Map>
I want to move my Mobile:DevicePushpinTemplateSelector.DetailedTemplate into resources so I can reuse it somewhere else.
I declared resource:
<UserControl.Resources>
<DataTemplate x:Key="DetailedMapItemTemplate">
<Border Background="{Binding IsGPSDataRecent, Converter={StaticResource BoolToGreenRedBrushConverter}}" BorderBrush="Black" BorderThickness="1" Padding="2" CornerRadius="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="Id:" FontWeight="Bold" />
<TextBlock Text="{Binding DisplayId}" Grid.Column="1" />
<TextBlock Text="Device Id:" FontWeight="Bold" Grid.Row="1" />
<TextBlock Text="{Binding DeviceId}" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="Speed:" FontWeight="Bold" Grid.Row="2" />
<TextBlock Text="{Binding Speed}" Grid.Row="2" Grid.Column="1" />
<TextBlock Text="Location:" FontWeight="Bold" Grid.Row="3" />
<TextBlock Text="{Binding Location}" Grid.Row="3" Grid.Column="1" />
<Button Content="View Details" Grid.Row="4" Grid.ColumnSpan="2" />
</Grid>
</Border>
</DataTemplate>
</UserControl.Resources>
My problem is that I don't know HOW to use this DataTemplate inside my selector. What is the XAML I need to use? With controls like ListBox it is easy, just set ItemTemplate="{StaticResource thisTemplate}" but how do I do this in my case? Still learning XAML
Just set the DetailedTemplate property in the tag itself:
<Mobile:DevicePushpinTemplateSelector
m:MapLayer.Position="{Binding Location}"
ZoomLevel="{Binding ZoomLevel, ElementName=MainMap}"
Content="{Binding}"
DetailedTemplate="{StaticResource DetailedMapItemTemplate}">
...
I made a calender using a grid. It has 7 columns, and 6 rows. By getting the day of the week and the week of the month I can figure out how to place the dates on the grid of the date choosen. However grids only show ugly grid lines. How can I change this to use a datagrid so that I can have solid gridlines like a calender should look. Or is there any other way I can get rid of the dashed grid lines to make it look better? Thanks in advance.
XAML: I make a ItemsControl and in that is the grid with the 7 columns and 6 rows.
<Grid Name="mainGrid">
<Grid Name="controlGrid" Margin="0,56,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="297*" />
<ColumnDefinition Width="290*" />
</Grid.ColumnDefinitions>
<ItemsControl ItemsSource="{Binding schedule}" Name="Calender" VerticalAlignment="Stretch" Grid.ColumnSpan="2">
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl" >
<Border BorderBrush="Aqua" BorderThickness="4">
<ItemsPresenter/>
</Border>
</ControlTemplate>
</ItemsControl.Template>
<!-- ItemsPanelTemplate -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid ShowGridLines="True" Name="gridCalender">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock OpacityMask="Black" Name="txtBlockdays">
<Button Content="{Binding day}" Width="175" HorizontalAlignment="Stretch" VerticalAlignment="Top" VerticalContentAlignment="Top" HorizontalContentAlignment="Left" Background="#FF94EBEB">
</Button>
</TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
<!-- ItemContainerStyle -->
<ItemsControl.ItemContainerStyle>
<Style >
<Setter Property="Grid.Column" Value="{Binding WeekDay}" />
<Setter Property="Grid.Row" Value="{Binding WeekNo}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</Grid>
<Grid Name="dayGrid" VerticalAlignment="Top" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Content="Monday" Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="label2" VerticalAlignment="Bottom" Grid.Column="1" FontSize="16" />
<Label Content="Tuesday" Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="label3" VerticalAlignment="Bottom" Grid.Column="2" FontSize="16" />
<Label Content="Wednesday" Height="Auto" HorizontalAlignment="Stretch" Name="label4" VerticalAlignment="Bottom" Grid.Column="3" Margin="0" FontSize="16" />
<Label Content="Thursday" Height="Auto" HorizontalAlignment="Stretch" Name="label5" VerticalAlignment="Bottom" Grid.Column="4" Margin="0" FontSize="16" />
<Label Content="Friday" Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="label6" VerticalAlignment="Bottom" Grid.Column="5" FontSize="16" />
<Label Content="Saturday" Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="label7" VerticalAlignment="Bottom" Grid.Column="6" FontSize="16" />
<Button Content="<" Height="23" HorizontalAlignment="Left" Margin="0,1,0,0" Name="btnDateLeft" VerticalAlignment="Top" Width="29" Click="btnDateLeft_Click" />
<Button Content=">" Height="23" HorizontalAlignment="Left" Margin="26,1,0,0" Name="btnDateRight" VerticalAlignment="Top" Width="30" Click="btnDateRight_Click" />
<Label Content="Sunday" Name="label1" Width="Auto" FontSize="16" Margin="0,19,0,0" />
</Grid>
<Label HorizontalAlignment="Left" Margin="62,1,0,0" Name="lblDate" VerticalAlignment="Top" FontSize="15" FontWeight="Bold" Height="32" />
</Grid>
Adjust your ItemContainerStyle and set ShowGridlines to false.
<ItemsControl.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Setter Property="Grid.Column" Value="{Binding WeekDay}" />
<Setter Property="Grid.Row" Value="{Binding WeekNo}" />
<Setter Property="Control.BorderBrush" Value="Black" />
</Style>
</ItemsControl.ItemContainerStyle>
Also note that you can also place a Rectangle in each box which you cold also style accordingly. there are many ways to achieve what you are after.
I'm new to vs10 and I'm trying to make a customized schedule/calender using WPF. So far I have somewhat of a visual. I'm using a grid with rectangles and separators to make the grid lines. What I'm confused on is how I can make every month. I want to be able to have two arrow buttons switching between months but I'm not sure what I can do to make the correct dates to appear where they should be. I was going to use buttons to display each date on the calender so when the user clicks on it he/she can add an event/appointment for that particular day/date. Any advice or tips is greatly appreciated.
Page x:Class="Camp_.SchedulePage"
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"
d:DesignHeight="315" d:DesignWidth="587"
Title="schedulePage" Background="#FF0A0A0A">
<Grid Width="Auto">
<Calendar Height="174" HorizontalAlignment="Left" Margin="190,78,0,0" Name="calendar1" VerticalAlignment="Top" Width="189" />
<Grid>
<Grid.Background>
<RadialGradientBrush>
<GradientStop Color="#FFC3D6F5" Offset="0" />
<GradientStop Color="#FFEFF5FF" Offset="1" />
</RadialGradientBrush>
</Grid.Background>
<Grid HorizontalAlignment="Stretch" Margin="98,60,0,0" Name="grid1" VerticalAlignment="Stretch" Width="Auto" OpacityMask="Black" Opacity="1" Background="#FFC2ECEC" ShowGridLines="False">
<Grid.Resources> <Style x:Key="VerticalSeparatorStyle"
TargetType="{x:Type Separator}"
BasedOn="{StaticResource {x:Type Separator}}">
<Setter Property="Margin" Value="0,0,0,0"/>
<Setter Property="LayoutTransform">
<Setter.Value>
<TransformGroup>
<TransformGroup.Children>
<TransformCollection>
<RotateTransform Angle="90"/>
</TransformCollection>
</TransformGroup.Children>
</TransformGroup>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Separator Grid.ColumnSpan="7" Height="19" HorizontalAlignment="Stretch" Margin="0" Name="separator4" VerticalAlignment="Stretch" Width="Auto" Grid.Row="3" Grid.RowSpan="2" Background="Aqua" HorizontalContentAlignment="Stretch" Foreground="Aqua" OpacityMask="Aqua" />
<Separator Height="19" HorizontalAlignment="Stretch" Margin="0" Name="separator2" VerticalAlignment="Stretch" Width="Auto" Background="Aqua" Grid.ColumnSpan="7" Grid.Row="1" Grid.RowSpan="2" HorizontalContentAlignment="Stretch" Foreground="Aqua" />
<Separator Height="26" HorizontalAlignment="Stretch" Name="separator1" VerticalAlignment="Stretch" Background="Aqua" Grid.Row="2" Grid.ColumnSpan="7" Margin="0" Grid.RowSpan="2" HorizontalContentAlignment="Stretch" Foreground="Aqua" />
<Separator Height="27" HorizontalAlignment="Stretch" Margin="0" Name="separator3" VerticalAlignment="Stretch" Background="Aqua" Grid.ColumnSpan="7" Grid.RowSpan="2" Width="Auto" HorizontalContentAlignment="Stretch" Foreground="Aqua" />
<Rectangle Height="Auto" HorizontalAlignment="Stretch" Name="rectangle1" Stroke="Aqua" VerticalAlignment="Stretch" Width="Auto" Grid.RowSpan="5" />
<Rectangle Grid.RowSpan="5" Height="Auto" HorizontalAlignment="Stretch" Name="rectangle2" Stroke="Aqua" VerticalAlignment="Stretch" Width="Auto" Grid.Column="1" />
<Rectangle Grid.RowSpan="5" HorizontalAlignment="Stretch" Name="rectangle3" Stroke="Aqua" VerticalAlignment="Stretch" Width="Auto" Grid.Column="2" />
<Rectangle Grid.RowSpan="5" Height="Auto" HorizontalAlignment="Stretch" Name="rectangle4" Stroke="Aqua" Grid.Column="3" />
<Rectangle Grid.RowSpan="5" Height="Auto" HorizontalAlignment="Stretch" Name="rectangle5" Stroke="Aqua" Grid.Column="4" Margin="0" Grid.ColumnSpan="2" />
<Rectangle Grid.RowSpan="5" Height="Auto" HorizontalAlignment="Stretch" Name="rectangle6" Stroke="Aqua" VerticalAlignment="Stretch" Grid.Column="5" />
<Rectangle Grid.RowSpan="5" Height="Auto" HorizontalAlignment="Stretch" Name="rectangle7" Stroke="Aqua" VerticalAlignment="Stretch" Grid.Column="6" />
<Button Content="1" Height="20" HorizontalAlignment="Stretch" Name="button1" VerticalAlignment="Top" Width="Auto" Grid.Column="6" HorizontalContentAlignment="Left" />
<Button Content="2" Height="20" HorizontalAlignment="Stretch" Name="button2" VerticalAlignment="Top" Width="Auto" Grid.Row="1" HorizontalContentAlignment="Left" />
</Grid>
<Grid Height="31" HorizontalAlignment="Stretch" Margin="98,31,0,0" Name="grid2" VerticalAlignment="Top" Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Content="Sunday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,0,0" Name="label1" VerticalAlignment="Top" />
<Label Content="Monday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,0,0" Name="label2" VerticalAlignment="Top" Grid.Column="1" />
<Label Content="Tuesday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,0,0" Name="label3" VerticalAlignment="Top" Grid.Column="2" />
<Label Content="Wednesday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,68,0" Name="label4" VerticalAlignment="Top" Grid.Column="3" Grid.ColumnSpan="2" />
<Label Content="Thursday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,2,0" Name="label5" VerticalAlignment="Top" Grid.Column="4" />
<Label Content="Friday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,0,0" Name="label6" VerticalAlignment="Top" Grid.Column="5" />
<Label Content="Saturday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,0,0" Name="label7" VerticalAlignment="Top" Grid.Column="6" />
</Grid>
<Button Content=">" Height="23" HorizontalAlignment="Left" Margin="488,6,0,0" Name="button3" VerticalAlignment="Top" Width="29" />
<Button Content="<" Height="23" HorizontalAlignment="Left" Margin="168,8,0,0" Name="button4" VerticalAlignment="Top" Width="29" />
</Grid>
</Grid>
Usually I would bind a list of Day objects to an ItemsControl whose ItemsPanel is set to a Grid with 6 rows, and 7 columns, and either have each Day track what Week and WeekDay it belongs to, or have a converter figure out those values for me. Then I could bind those values to Grid.Row and Grid.Column in my ItemsControl.ItemContainerStyle
So my Day object would look like:
public class Day : INotifyPropertyChanged
{
// Of course, these should implement the usual PropertyChange Notifications
public int WeekNo {get; set;}
public int WeekDay {get; set;}
public DateTime Date {get; set;}
}
and I would have an ObservableCollection<Day> Days in my ViewModel, which would be bound in the XAML with this:
<ItemsControl ItemsSource="{Binding Days}">
<!-- ItemsPanelTemplate -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- ItemContainerStyle -->
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Column" Value="{Binding DayOfWeek}" />
<Setter Property="Grid.Row" Value="{Binding WeekNo}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
I wrote some examples on how to use an ItemsControl here if you're interested