Load Pivotitems incrementally. Mimic month view in wp8 Calendar - c#

I want to build a monthview like the native wp8 calendar has.
But I am stuck with the incrementally loading of more Pivotitems when reaching the the end of the initial loaded Pivotitems.
I am kind of confused, how this could be achieved.
Here is my xaml so far:
<phone:Pivot x:Name="MonthViewPivot" ItemsSource="{Binding Months}" Margin="0" Loaded="Pivot_Loaded" SelectionChanged="Pivot_SelectionChanged">
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<Grid>
<TextBlock Padding="0,0,0,0" Text="{Binding Name}" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<CompositeTransform TranslateX="0" TranslateY="24"/>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:Pivot.ItemTemplate>
<DataTemplate>
<Grid x:Name="MonthViewGrid" Height="480" Loaded="MonthViewGrid_Loaded" VerticalAlignment="Top" Margin="-10,70">
<StackPanel Orientation="Horizontal" Height="30" VerticalAlignment="Top" Margin="0,-30" >
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Mo</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Di</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Mi</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Do</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Fr</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Sa</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">So</TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>


So here is my solution so far.
I still need to increase the count of PivotItems, but 12 seems to high for a fast UX. I think 5 will do.
UserControl:
<UserControl x:Class="Pocal.MonthViewUserControl"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480">
<Grid x:Name="LayoutRoot">
<Grid x:Name="MonthViewGrid" Margin="0,60,0,0">
<StackPanel Orientation="Horizontal" Height="30" VerticalAlignment="Top" Margin="0,-30" >
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Mon</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Tue</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Wed</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Thu</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Fri</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Sat</TextBlock>
<TextBlock Width="68.5" Padding="6,0" Foreground="Gray">Sun</TextBlock>
</StackPanel>
</Grid>
</Grid>
UserControl Code Behind:
public partial class MonthViewUserControl : UserControl
{
public MonthViewUserControl()
{
InitializeComponent();
}
public void loadGridSetup(DateTime dt)
{
TextBlock txt = new TextBlock();
txt.Text = dt.ToShortDateString();
txt.Tap += dayTap;
(MonthViewGrid as Grid).Children.Add(txt);
}
void dayTap(object sender, System.Windows.Input.GestureEventArgs e)
{
DateTime dt = (DateTime)((FrameworkElement)sender).DataContext;
MonthView.CurrentPage.navigateBackToDay(dt);
}
}
MonthView XAML:
<phone:PhoneApplicationPage
x:Class="Pocal.MonthView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:local="clr-namespace:Pocal"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="False">
<Grid x:Name="LayoutRoot" Background="Transparent">
<TextBlock Style="{StaticResource PhoneTextTitle3Style}" VerticalAlignment="Top" Margin="24,24" FontWeight="SemiBold">2014</TextBlock>
<phone:Pivot x:Name="MonthsPivot" Margin="0,36,0,0" SelectionChanged="Pivot_SelectionChanged">
</phone:Pivot>
</Grid>
MonthView COde Behind:
public partial class MonthView : PhoneApplicationPage
{
public static MonthView CurrentPage;
PivotItem pivotItem;
MonthViewUserControl monthViewUserControl;
public MonthView()
{
InitializeComponent();
CurrentPage = this;
addFirstThreePivots();
}
private void addFirstThreePivots()
{
DateTime dt = DateTime.Now.Date;
DateTime dt2 = dt.AddMonths(1);
DateTime dt3 = dt.AddMonths(-1);
addPivotItem(dt);
addPivotItem(dt2);
addPivotItem(dt3);
}
private void addPivotItem(DateTime dt)
{
monthViewUserControl = new MonthViewUserControl();
monthViewUserControl.loadGridSetup(dt);
pivotItem = new PivotItem();
pivotItem.Content = monthViewUserControl;
pivotItem.DataContext = dt;
pivotItem.Margin = new Thickness(0, 0, 0, 0);
pivotItem.Header = dt.ToString("MMMM");
MonthsPivot.Items.Add(pivotItem);
}
private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
DependencyObject selectedPivotItem = ((Pivot)sender).ItemContainerGenerator.ContainerFromIndex(((Pivot)sender).SelectedIndex);
if (selectedPivotItem == null)
return;
DateTime removedDateTime = (DateTime)(e.RemovedItems[0] as PivotItem).DataContext;
DateTime addedDateTime = (DateTime)(e.AddedItems[0] as PivotItem).DataContext;
if (removedDateTime < addedDateTime)
{
forwardPan(addedDateTime);
}
else
backwardPan(addedDateTime);
}
private void forwardPan(DateTime addedDateTime)
{
PivotItem nextPivotItem = (PivotItem)getNextPivotItem();
DateTime newDateTime = addedDateTime.AddMonths(1);
MonthViewUserControl monthViewItem = new MonthViewUserControl();
monthViewItem.loadGridSetup(newDateTime);
nextPivotItem.DataContext = newDateTime;
nextPivotItem.Content = monthViewItem;
nextPivotItem.Header = newDateTime.ToString("MMMM");
}
private DependencyObject getNextPivotItem()
{
int index = ((Pivot)MonthsPivot).SelectedIndex;
int nextIndex;
if (index == 2)
{
nextIndex = 0;
}
else
nextIndex = index + 1;
DependencyObject nextPivotItem = ((Pivot)MonthsPivot).ItemContainerGenerator.ContainerFromIndex(nextIndex);
return nextPivotItem;
}
private void backwardPan(DateTime addedDateTime)
{
PivotItem previousPivotItem = (PivotItem)getPreviousPivotItem();
DateTime newDateTime = addedDateTime.AddMonths(-1);
MonthViewUserControl monthViewItem = new MonthViewUserControl();
monthViewItem.loadGridSetup(newDateTime);
previousPivotItem.DataContext = newDateTime;
previousPivotItem.Content = monthViewItem;
previousPivotItem.Header = newDateTime.ToString("MMMM");
}
private DependencyObject getPreviousPivotItem()
{
int index = ((Pivot)MonthsPivot).SelectedIndex;
int previousIndex;
if (index == 0)
{
previousIndex = 2;
}
else
previousIndex = index - 1;
DependencyObject previousPivotItem = ((Pivot)MonthsPivot).ItemContainerGenerator.ContainerFromIndex(previousIndex);
return previousPivotItem;
}
public void navigateBackToDay(DateTime dt)
{
App.ViewModel.GoToDate(dt);
NavigationService.Navigate(new Uri("/Mainpage.xaml?GoToDate=", UriKind.Relative), dt);
}
}

Related

How to get all of listBox marked checkBox? WPF

XAML:
<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:WpfApplication1"
xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" x:Class="WpfApplication1.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="637" Width="1889">
<Grid RenderTransformOrigin="0.505,0.844" Margin="0,0,0,19">
<CheckBox x:Name="cbFilter" Content="CheckBox" HorizontalAlignment="Left" Margin="15,410,0,0" VerticalAlignment="Top" Width="100" Height="25"/>
<ComboBox x:Name="cbFilterMode" HorizontalAlignment="Left" Margin="95,410,0,0" VerticalAlignment="Top" Width="120">
<TextBlock>=</TextBlock>
<TabItem/>
</ComboBox>
<TextBox x:Name="txtFilterValue" HorizontalAlignment="Left" Height="23" Margin="225,409,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
<GroupBox x:Name="groupBox" Header="GroupBox" HorizontalAlignment="Left" Margin="225,10,0,0" VerticalAlignment="Top" Width="1110" Height="385">
<DataGrid x:Name="dataGrid" HorizontalAlignment="Left" Margin="245,105,0,0" VerticalAlignment="Top" Height="230" Width="645"/>
</GroupBox>
<ListBox x:Name="listBox" HorizontalAlignment="Left" Height="385" Margin="10,10,0,0" VerticalAlignment="Top" Width="230" FontFamily="Segoe UI Black" Grid.Column="10">
<ListBox.ItemTemplate >
<DataTemplate>
<CheckBox x:Name="qqq" Content="{Binding }" IsChecked="{Binding IsChecked}" Click="CheckBox_Click"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Code behind:
private void CheckBox_Click(object sender, RoutedEventArgs e)
{
var cb = sender as CheckBox;
var item = cb.IsChecked;
listBox.SelectedItem = item;
if (listBox.SelectedIndex==0) return;
string query = "SELECT NON EMPTY { [Measures].[Число Подписки] } ON COLUMNS, NON EMPTY {(";
foreach (string i in listBox.Checked)
{
query += " " + i.ToString() + ".ALLMEMBERS *";
}
query = query.Remove(query.Length - 2);
query += " )} DIMENSION PROPERTIES MEMBER_CAPTION, MEMBER_UNIQUE_NAME ON ROWS FROM [Почта] CELL PROPERTIES VALUE, BACK_COLOR, FORE_COLOR, FORMATTED_VALUE, FORMAT_STRING, FONT_NAME, FONT_SIZE, FONT_FLAGS";
UpdateChart(query);
}
It turns out only to withdraw all at once, and how to do that would be deduced by one (ie. If checkBox == true, then we conclude that measurement of the cube)

If you have a such model class:
public class FooClass
{
public bool IsChecked { get; set; }
}
and populating of ListBox looks like that:
public MainWindow()//***ctor of Window
{
InitializeComponent();
PopulateListView();
}
private void PopulateListView()
{
IList<FooClass> someValues = new List<FooClass>();
for (int i = 0; i < 10; i++)
{
someValues.Add(new FooClass() { IsChecked=true});
}
listBox.ItemsSource = someValues;
}
Then to get all CheckBox'es values from ListBox you can do:
private void qqq_Click(object sender, RoutedEventArgs e)
{
var e1=listBox.Items;
foreach (var c in listBox.ItemsSource)
{
MessageBox.Show(((FooClass)c).IsChecked.ToString());
}
}

C# WPF - how to prevent image to be dragged outside canvas

i tried this Answer and implement it to my code, and here is my code :
XAML
<Window x:Class="DSLayout.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:tk="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:local="clr-namespace:DSLayout"
Title="MainWindow" Height="720" Width="1280" ResizeMode="NoResize">
<Window.Resources>
<local:BrushColorConverter x:Key="BrushColorConverter"/>
</Window.Resources>
<Grid>
<Border BorderBrush="Silver" BorderThickness="1" Name="borderHeader" Margin="12,12,12,636" />
<Border BorderBrush="Silver" BorderThickness="1" Name="borderEditor" Margin="12,69,850,12">
<Canvas>
<Border BorderBrush="Silver" BorderThickness="1" Canvas.Left="24" Canvas.Top="20" Height="59" Name="border1" Width="355"></Border>
<Canvas Height="59" Canvas.Left="26" Canvas.Top="20"></Canvas>
<TextBlock Name="textBlock1" Text="Color Palette" Height="31" Width="197" FontSize="22" Canvas.Left="40" Canvas.Top="34" />
<tk:ColorPicker x:Name="ColorPalette" ColorMode="ColorCanvas"
SelectedColor="{Binding ElementName=Layout,
Path=Background,
Converter={StaticResource BrushColorConverter}}"
Canvas.Left="243" Canvas.Top="34" Height="31" />
<Button Grid.Row="1" Content="Add Image" Click="AddButtonClick" Canvas.Left="24" Canvas.Top="100" Height="43" Width="104" />
<Border BorderBrush="Silver" BorderThickness="1" Canvas.Left="24" Canvas.Top="227" Height="350" Name="border3" Width="355">
<Canvas>
<TextBlock Canvas.Left="15" Canvas.Top="27" Height="23" Name="textBlock2" Text="X-Pos " FontSize="16" Width="53" />
<TextBlock Canvas.Left="174" Canvas.Top="27" FontSize="16" Height="23" Name="textBlock3" Text="Y-Pos " Width="53" />
<Label Name="posX" Height="23" Width="83" Canvas.Left="74" Canvas.Top="27" />
<Label Name="posY" Canvas.Left="233" Canvas.Top="27" Height="23" Width="83" />
<TextBlock Canvas.Left="15" Canvas.Top="68" FontSize="16" Height="23" Name="textBlock4" Text="Width" Width="53" />
<TextBlock Canvas.Left="174" Canvas.Top="68" FontSize="16" Height="23" Name="textBlock5" Text="Height" Width="53" />
<Label Name="imgHeight" Canvas.Left="74" Canvas.Top="68" Height="23" Width="83" />
<Label Name="imgWidth" Canvas.Left="233" Canvas.Top="68" Height="23" Width="83" />
<!--<TextBlock Canvas.Left="15" Canvas.Top="169" FontSize="16" Height="23" Name="textBlock4" Text="Height" Width="53" />
<TextBlock Canvas.Left="174" Canvas.Top="169" FontSize="16" Height="23" Name="textBlock5" Text="Width" Width="53" />
<TextBox Canvas.Left="74" Canvas.Top="169" Height="23" Name="textBox3" Width="83" />
<TextBox Canvas.Left="233" Canvas.Top="169" Height="23" Name="textBox4" Width="83" />-->
</Canvas>
</Border>
</Canvas>
</Border>
<Border BorderBrush="Silver" BorderThickness="1" Name="borderLayout" Margin="446,69,12,12">
<Canvas x:Name="Layout" Background="White" AllowDrop="True" ClipToBounds="True"
MouseLeftButtonDown="MouseLeftButtonDown"
MouseLeftButtonUp="MouseLeftButtonUp"
MouseMove="MouseMove">
</Canvas>
</Border>
</Grid>
CS
namespace DSLayout
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
public int imgX { get; set; }
public int imgY { get; set; }
private void AddButtonClick(object sender, RoutedEventArgs e)
{
var dialog = new Microsoft.Win32.OpenFileDialog();
dialog.Filter =
"Image Files (*.jpg; *.png; *.jpeg; *.gif; *.bmp)|*.jpg; *.png; *.jpeg; *.gif; *.bmp";
if ((bool)dialog.ShowDialog())
{
var bitmap = new BitmapImage(new Uri(dialog.FileName));
var image = new Image { Source = bitmap };
this.imgX = bitmap.PixelWidth;
this.imgY = bitmap.PixelWidth;
Canvas.SetLeft(image, 0);
Canvas.SetTop(image, 0);
Layout.Children.Add(image);
imgHeight.Content = bitmap.PixelHeight;
imgWidth.Content = bitmap.PixelWidth;
}
}
private Image draggedImage;
private Point mousePosition;
private void MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var image = e.Source as Image;
if (image != null && Layout.CaptureMouse())
{
mousePosition = e.GetPosition(Layout);
draggedImage = image;
Panel.SetZIndex(draggedImage, 1);
}
}
private void MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
if (draggedImage != null)
{
Layout.ReleaseMouseCapture();
Panel.SetZIndex(draggedImage, 0);
draggedImage = null;
}
}
private void MouseMove(object sender, MouseEventArgs e)
{
if (draggedImage != null)
{
var position = e.GetPosition(Layout);
var offset = position - mousePosition;
mousePosition = position;
if (mousePosition.X > 0 && mousePosition.Y > 0)
{
Canvas.SetLeft(draggedImage, Canvas.GetLeft(draggedImage) + offset.X);
Canvas.SetTop(draggedImage, Canvas.GetTop(draggedImage) + offset.Y);
}
posX.Content = Canvas.GetLeft(draggedImage);
posY.Content = Canvas.GetTop(draggedImage);
}
}
}
}
so i tried using the ClipToBound="True" but it'll missing if i drag to outside the canvas. so i tried to limit it using if (mousePosition.X > 0 && mousePosition.Y > 0) works but not that i want because it will go outside the canvas if i drag it to the left and i drag from the right point of the image.
my idea is to make the draggedImage to be my cursor so with if (mousePosition.X > 0 && mousePosition.Y > 0) it will prevent draggedImage to go outside the canvas. is that possible to do that?
or any simple idea to solve this?
EDIT :
i tried using this code but it works but its not really good because when i drag it out side the canvas it'll move like bouncy from pos -1 to 0.
if (Canvas.GetLeft(draggedImage) <= 0)
{
Canvas.SetLeft(draggedImage, 0);
}
if (Canvas.GetTop(draggedImage) <= 0)
{
Canvas.SetTop(draggedImage, 0);
}
if (Canvas.GetLeft(draggedImage) + this.imgX >= 800)
{
Canvas.SetLeft(draggedImage, 800 - this.imgX);
}
if (Canvas.GetTop(draggedImage) +this.imgY >= 600)
{
Canvas.SetTop(draggedImage, 600 - this.imgY);
}

When you drag an item you change it's X and Y position by specifying Canvas's attached properties Canvas.Left and Canvas.Top. So it is easy to ensure that the dragged element does not get dragged outside it's panel.
double canvasSize = 800;
double newLeft = Canvas.GetLeft(draggedImage) + offset.X;
double newTop = Canvas.GetTop(draggedImage) + offset.Y;
if (newLeft < 0)
newLeft = 0;
else if (newLeft + draggedImage.ActualWidth > canvasSize)
newLeft = canvasSize - draggedImage.ActualWidth;
if (newTop < 0)
newTop = 0;
else if (newTop + draggedImage.ActualHeight > canvasSize)
newTop = canvasSize - draggedImage.ActualHeight;
Canvas.SetLeft(draggedImage, newLeft);
Canvas.SetTop(draggedImage, newTop);
This will check if the element you drag is going outside of the Canvas.

WPF. How to add text under image in c#

I have image which I set behind code and now I have to set 3 texts under the picture also behind code, maybe somenoe knoe how to make it?
my xaml:
...<Style x:Key="imageStyle" TargetType="{x:Type Image}">
<Setter Property="Height" Value="152px"/>
<Setter Property="Width" Value="762"/>
</Style>
</windows.Resources>
<Grid>
<StackPanel x:Name="StackStyle" Background="#FFFFFF" Margin="30,98,250,150">...
My xaml.cs is:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.Loaded += OnLoaded;
}
private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
{
Style imgStyle = (Style)Resources["imageStyle"];
var imag = new Image();
imag.Style = imgStyle;
string path = System.AppDomain.CurrentDomain.BaseDirectory + "../../ico.choose-coupon.png";
imag.Source = new BitmapImage(new Uri(path));
StackStyle.Children.Add(imag);
}
}
do not forget that this is one image, and these text have to be under Gray field.
UPDATE:
I get what I want, thats the code:
xaml:
<Viewbox Stretch="Fill">
<Grid>
<StackPanel Orientation="Vertical" x:Name="myStackPanel" Background="#FFFFFF" Height="560" Width="968" HorizontalAlignment="Center" >
<Label Style="{StaticResource Label}" ></Label>
</StackPanel>
</Grid>
</Viewbox>
xaml.cs:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.Loaded += OnLoaded;
}
private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
{
string path = System.AppDomain.CurrentDomain.BaseDirectory + "../../ico.choose-coupon.png";
Style imgStyle = (Style)Resources["imageStyle"];
var imag = new Image();
imag.Style = imgStyle;
imag.Source = new BitmapImage(new Uri(path));
myStackPanel.Children.Add(imag);
Style textStyle = (Style) Resources["textStyle"];
var text1 = new TextBlock();
var text2 = new TextBlock();
var text3 = new TextBlock();
text1.Style = textStyle;
text2.Style = textStyle;
text3.Style = textStyle;
text1.Text = "% coupon";
text2.Text = "Tara receipt";
text3.Text = "Value coupon";
text1.Margin = new Thickness(135,22,0,0);
text2.Margin = new Thickness(210, 22, 0, 0);
text3.Margin = new Thickness(188, 22, 0, 0);
var TextPanel = new StackPanel();
TextPanel.Orientation = Orientation.Horizontal;
TextPanel.Children.Add(text1);
TextPanel.Children.Add(text2);
TextPanel.Children.Add(text3);
myStackPanel.Children.Add(TextPanel);
}
}

You can use a button style. For the Text and the Image you can set an binding to the propertys. Maybe you write an Style for the button so that looks like in your example.
<Button>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Source}">
<Label Padding="0" Text="{Binding YourText}"></Label>
</StackPanel>
</Button>

Here is an exmaple of simple UserControl:
Add new userControl template to your project.
I am attaching an example of userControl with TextBox and TextBlock:
<UserControl
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"
x:Class="WpfApplication1.Example"
x:Name="UserControl"
d:DesignWidth="640" d:DesignHeight="480" Width="40" Height="40">
<Grid x:Name="LayoutRoot" Width="40" Height="40" Background="White">
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Test " VerticalAlignment="Top" Height="14.32"/>
<TextBox HorizontalAlignment="Left" Height="23" Margin="0,17,0,0" TextWrapping="Wrap" Text="Text" VerticalAlignment="Top" Width="40"/>
</Grid>
</UserControl>
Then in your window, just call to your userControl as much as you want(You can pass objects to it too):
<local:Example HorizontalAlignment="Left" Margin="16.4,22.4,0,0" VerticalAlignment="Top"/>
<local:Example HorizontalAlignment="Left" Margin="16.4,22.4,0,0" VerticalAlignment="Top"/>
<local:Example HorizontalAlignment="Left" Margin="16.4,22.4,0,0" VerticalAlignment="Top"/>

How to expand map in a grid in C#?

xaml
<Grid x:Name="LayoutRoot">
<maps:Map x:Name="mapWithMyLocation" HorizontalAlignment="Left" Margin="1,0,0,443" VerticalAlignment="Bottom" Height="233" Width="479" ZoomLevel="10"/>
<Grid Margin="0,0,0,77" Grid.Row="1" RenderTransformOrigin="0.5,0.5" Height="366" VerticalAlignment="Bottom" Grid.ColumnSpan="2">
<phone:LongListSelector x:Name="closestBusList" ItemsSource="{Binding KioskList}" SelectionChanged="closestBusList_SelectionChanged_1" Height="366" VerticalAlignment="Top">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Opacity="0.5" Background="WhiteSmoke">
<TextBlock FontWeight="Bold" Foreground="#0145A6" FontSize="14" x:Name="owner" Text="{Binding owner}"></TextBlock>
<TextBlock FontWeight="Bold" Foreground="#038edf" FontSize="12" x:Name="addres" Text="{Binding address}"></TextBlock>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
</Grid>
cs
private void expand_btn_Click(object sender, RoutedEventArgs e)
{
double height = this.mapWithMyLocation.Height;
double from, to;
// animate from 150 to 800, or vice versa
if (height == 233)
{
from = 233;
to = 800;
closestBusList.Visibility = Visibility.Collapsed;
}
else
{
from = 800;
to = 233;
closestBusList.Visibility = Visibility.Visible;
}
Storyboard sb = new System.Windows.Media.Animation.Storyboard();
DoubleAnimation fillHeightAnimation = new System.Windows.Media.Animation.DoubleAnimation();
fillHeightAnimation.From = from;
fillHeightAnimation.To = to;
fillHeightAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.3));
Storyboard.SetTarget(fillHeightAnimation, this.mapWithMyLocation);
Storyboard.SetTargetProperty(fillHeightAnimation, new PropertyPath("Height"));
sb.Children.Add(fillHeightAnimation);
sb.Begin();
}

After adding three row definitions and adding the map inside grid, the problem solved.

How to create a WPF Window without a border that can be resized?

Is there a way in WPF where I can remove the main window's border, yet allow that window to be resized (without grip)?
I realized there's a way to do this scenario by setting resize mode to CanResizeWithGrip. However, I want to be able to do it with the resize mode set to CanResize.
I tried setting the following:
ResizeMode="CanResize"
WindowStyle="None"
AllowsTransparency="True"
However, by setting AllowsTransparency, it removes the ability to resize without the grip. Any ideas how I can pull this off?
I also should note that I can't set AllowsTransparency to true anyway, because I am using a winformshost control in my window, which is not shown when AllowsTransparency is true.

I know this is an old question, but I just wanted to put up a working sample for newcomers.
Xaml Window:
<Window x:Class="CustomWindowDemo.DemoCustomWindow"
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:CustomWindowDemo"
mc:Ignorable="d"
Title="DemoCustomWindow" Height="300" Width="300" Background="{x:Null}" AllowsTransparency="True" WindowStyle="None">
<Window.Resources>
<Style x:Key="BorderThumb" TargetType="Thumb">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Rectangle MinWidth="4" MinHeight="4" StrokeThickness="0">
<Rectangle.Fill>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}" Opacity="0.05"/>
</Rectangle.Fill>
</Rectangle>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Border BorderBrush="#55FFFFFF" BorderThickness="1" CornerRadius="5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border MouseMove="Header_MouseMove" DockPanel.Dock="Top" Height="32" Grid.Row="1" Grid.Column="1">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,3">
<GradientStop Color="#3BB2EA" Offset="0" />
<GradientStop Color="#EFF7FA" Offset="0.3" />
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,0,0,0" Text="{Binding Path=Title, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}"/>
<Button x:Name="btn_Minimize" Background="{x:Null}" BorderBrush="{x:Null}" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" BorderThickness="0" Click="btn_Minimize_Click" Grid.Column="1">
<Image Source="Resources/Ahmadhania-Spherical-Minimize.ico"/>
</Button>
<Button x:Name="btn_Maximize" Background="{x:Null}" BorderBrush="{x:Null}" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" BorderThickness="0" Grid.Column="2" Click="btn_Maximize_Click">
<Image Source="Resources/1412181205_61002.ico"/>
</Button>
<Button x:Name="btn_Close" Background="{x:Null}" BorderBrush="{x:Null}" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" BorderThickness="0" Grid.Column="3" Click="btn_Close_Click">
<Image Source="Resources/Ahmadhania-Spherical-Close(1).ico"/>
</Button>
</Grid>
</Border>
<Thumb x:Name="ThumbBottom" DragDelta="ThumbBottom_DragDelta" HorizontalAlignment="Stretch" Cursor="SizeNS" Grid.Column="0" Background="{x:Null}" Margin="3,0" Grid.ColumnSpan="3" Grid.Row="3" Style="{Binding Mode=OneWay, Source={StaticResource BorderThumb}}"/>
<Thumb x:Name="ThumbTop" DragDelta="ThumbTop_DragDelta" HorizontalAlignment="Stretch" Cursor="SizeNS" Grid.Column="0" Background="{x:Null}" Margin="3,0" Grid.ColumnSpan="3" Height="4" Style="{Binding Mode=OneWay, Source={StaticResource BorderThumb}}"/>
<Thumb x:Name="ThumbBottomRightCorner" DragDelta="ThumbBottomRightCorner_DragDelta" HorizontalAlignment="Right" Cursor="SizeNWSE" Grid.Row="3" Grid.Column="3" Background="{x:Null}" Style="{Binding Mode=OneWay, Source={StaticResource BorderThumb}}"/>
<Thumb x:Name="ThumbTopRightCorner" DragDelta="ThumbTopRightCorner_DragDelta" HorizontalAlignment="Right" Cursor="SizeNESW" Grid.Row="0" Grid.Column="2" Background="{x:Null}" Style="{Binding Mode=OneWay, Source={StaticResource BorderThumb}}"/>
<Thumb x:Name="ThumbTopLeftCorner" DragDelta="ThumbTopLeftCorner_DragDelta" HorizontalAlignment="Left" Cursor="SizeNWSE" Grid.Row="0" Grid.Column="0" Background="{x:Null}" Style="{Binding Mode=OneWay, Source={StaticResource BorderThumb}}" />
<Thumb x:Name="ThumbBottomLeftCorner" DragDelta="ThumbBottomLeftCorner_DragDelta" HorizontalAlignment="Left" Cursor="SizeNESW" Grid.Row="3" Grid.Column="0" Background="{x:Null}" Style="{Binding Mode=OneWay, Source={StaticResource BorderThumb}}" />
<Thumb x:Name="ThumbRight" DragDelta="ThumbRight_DragDelta" Cursor="SizeWE" Grid.Column="2" Grid.RowSpan="4" Background="{x:Null}" Margin="0,3" Style="{Binding Mode=OneWay, Source={StaticResource BorderThumb}}"/>
<Thumb x:Name="ThumbLeft" DragDelta="ThumbLeft_DragDelta" Cursor="SizeWE" Grid.Column="0" Grid.RowSpan="4" HorizontalContentAlignment="Right" Background="{x:Null}" Margin="0,3" Style="{Binding Mode=OneWay, Source={StaticResource BorderThumb}}"/>
<Grid x:Name="Grid_Content" Background="#EFF7FA" Grid.Row="2" Grid.Column="1">
</Grid>
</Grid>
</Border>
</Window>
C# code behind:
using System.Windows.Interop;
using winforms = System.Windows.Forms;
namespace CustomWindowDemo
{
/// <summary>
/// Interaction logic for DemoCustomWindow.xaml
/// </summary>
public partial class DemoCustomWindow : Window
{
bool Maximized = false;
int NormalWidth = 0;
int NormalHeight = 0;
int NormalX = 0;
int NormalY = 0;
public DemoCustomWindow()
{
InitializeComponent();
}
#region Header & Resize
void Header_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
if (e.LeftButton == System.Windows.Input.MouseButtonState.Pressed)
this.DragMove();
}
void ThumbBottomRightCorner_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
if (this.Width + e.HorizontalChange > 10)
this.Width += e.HorizontalChange;
if (this.Height + e.VerticalChange > 10)
this.Height += e.VerticalChange;
}
void ThumbTopRightCorner_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
if (this.Width + e.HorizontalChange > 10)
this.Width += e.HorizontalChange;
if (this.Top + e.VerticalChange > 10)
{
this.Top += e.VerticalChange;
this.Height -= e.VerticalChange;
}
}
void ThumbTopLeftCorner_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
if (this.Left + e.HorizontalChange > 10)
{
this.Left += e.HorizontalChange;
this.Width -= e.HorizontalChange;
}
if (this.Top + e.VerticalChange > 10)
{
this.Top += e.VerticalChange;
this.Height -= e.VerticalChange;
}
}
void ThumbBottomLeftCorner_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
if (this.Left + e.HorizontalChange > 10)
{
this.Left += e.HorizontalChange;
this.Width -= e.HorizontalChange;
}
if (this.Height + e.VerticalChange > 10)
this.Height += e.VerticalChange;
}
void ThumbRight_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
if (this.Width + e.HorizontalChange > 10)
this.Width += e.HorizontalChange;
}
void ThumbLeft_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
if (this.Left + e.HorizontalChange > 10)
{
this.Left += e.HorizontalChange;
this.Width -= e.HorizontalChange;
}
}
void ThumbBottom_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
if (this.Height + e.VerticalChange > 10)
this.Height += e.VerticalChange;
}
void ThumbTop_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
if (this.Top + e.VerticalChange > 10)
{
this.Top += e.VerticalChange;
this.Height -= e.VerticalChange;
}
}
void btn_Minimize_Click(object sender, RoutedEventArgs e)
{
WindowState = WindowState.Minimized;
}
void btn_Maximize_Click(object sender, RoutedEventArgs e)
{
if (Maximized == true)
{
this.Width = NormalWidth;
this.Height = NormalHeight;
this.Left = NormalX;
this.Top = NormalY;
Maximized = false;
Thumbs();
}
else
{
NormalX = (int)this.Left;
NormalY = (int)this.Top;
NormalHeight = (int)this.Height;
NormalWidth = (int)this.Width;
this.Left = winforms.Screen.FromHandle(new WindowInteropHelper(this).Handle).WorkingArea.Left;
this.Top = winforms.Screen.FromHandle(new WindowInteropHelper(this).Handle).WorkingArea.Top;
this.Width = winforms.Screen.FromHandle(new WindowInteropHelper(this).Handle).WorkingArea.Width;
this.Height = winforms.Screen.FromHandle(new WindowInteropHelper(this).Handle).WorkingArea.Height;
Maximized = true;
Thumbs();
}
}
void btn_Close_Click(object sender, RoutedEventArgs e)
{
Close();
}
void Thumbs()
{
if (Maximized == true)
{
ThumbBottom.Visibility = Visibility.Collapsed;
ThumbLeft.Visibility = Visibility.Collapsed;
ThumbTop.Visibility = Visibility.Collapsed;
ThumbRight.Visibility = Visibility.Collapsed;
ThumbTopLeftCorner.Visibility = Visibility.Collapsed;
ThumbTopRightCorner.Visibility = Visibility.Collapsed;
ThumbBottomLeftCorner.Visibility = Visibility.Collapsed;
ThumbBottomRightCorner.Visibility = Visibility.Collapsed;
}
else
{
ThumbBottom.Visibility = Visibility.Visible;
ThumbLeft.Visibility = Visibility.Visible;
ThumbTop.Visibility = Visibility.Visible;
ThumbRight.Visibility = Visibility.Visible;
ThumbTopLeftCorner.Visibility = Visibility.Visible;
ThumbTopRightCorner.Visibility = Visibility.Visible;
ThumbBottomLeftCorner.Visibility = Visibility.Visible;
ThumbBottomRightCorner.Visibility = Visibility.Visible;
}
}
#endregion
}
}

This can happen if ResizeBorderThickness is set to 0.
It can be set to a positive value in XAML like this:
<WindowChrome>
<WindowChrome.ResizeBorderThickness>
<Thickness>1</Thickness>
</WindowChrome.ResizeBorderThickness>
</WindowChrome>

You can use the WPF customizable window library, available here: http://wpfwindow.codeplex.com/
Then, when using the library's window type, you can set the same properties as you listed above
<CustomWindow:EssentialWindow x:Class="CustomWindowDemo.DemoEssentialWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:CustomWindow="clr-namespace:CustomWindow;assembly=CustomWindow"
AllowsTransparency="True" ResizeMode="CanResize" WindowStyle="None" Title="EssentialWindow"
Height="300" Width="250">

The user needs something to interact with to resize the window. If you don't like the default border or grip, you'll need to add some other control with a click and drag behavior that resizes the window. Perhaps a line on each edge of the window?

The simplest, but maybe too simple is
this.MouseLeftButtonDown += delegate { this.DragMove(); };

Categories