im trying to add a image to a windows phone 8 map, to serve as a pushpin
i have the following code on my XAML
<phone:PhoneApplicationPage
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:maps="clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps"
x:Class="Cartuxa.Contactos"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush ImageSource="/Assets/Images/bkContacts#2x.png"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28"/>
<Grid x:Name="ContentPanel" Grid.RowSpan="2" Margin="0,-6,0,6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="127*"/>
<ColumnDefinition Width="329*"/>
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Left" Margin="18.75,57.5,0,0" VerticalAlignment="Top" Source="/Assets/Images/logo#2x.png" Stretch="Fill" Grid.ColumnSpan="2" Width="221" Height="72"/>
<TextBlock HorizontalAlignment="Left" Margin="30,152,0,0" TextWrapping="Wrap" Text="Contactos" VerticalAlignment="Top" Foreground="#FFCD3333" FontFamily="Helvetica" FontSize="36" Grid.ColumnSpan="2" Width="174"/>
<Button HorizontalAlignment="Right" Margin="0,201,-13,0" VerticalAlignment="Top" Width="255" Background="White" Height="66" BorderThickness="0" Grid.Column="1" BorderBrush="#FFFF0909">
<Grid Grid.ColumnSpan="2">
<Image Name="POI_Left" Source="/Assets/Images/POI_Gray#2x.png" RenderTransformOrigin="0.4,0.274" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-180,0,0,0" Stretch="None"/>
<TextBlock HorizontalAlignment="Left"
Margin="13,6,-22,0"
TextWrapping="Wrap"
Text="Paços dos Condes de Basto"
VerticalAlignment="Top"
FontFamily="Helvetica"
Foreground="Black"
FontSize="14" Width="182"/>
</Grid>
</Button>
<maps:Map Name="contactosMaps" HorizontalAlignment="Left" Margin="0,271,0,0" VerticalAlignment="Top" RenderTransformOrigin="-1.737,-0.175" Grid.ColumnSpan="2" Height="290" Width="480"/>
<Button Name="Contactos_Btn1"
Click="Contactos_Btn1_Click"
HorizontalAlignment="Right"
Margin="-17,201,242,0"
VerticalAlignment="Top"
Width="255"
Background="White"
Height="65"
BorderThickness="0"
Grid.ColumnSpan="2">
<Grid Name="pushRed" Grid.ColumnSpan="2">
<Image x:Name="POI_Right" Source="/Assets/Images/POI_Red#2x.png" RenderTransformOrigin="0.4,0.274" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="-190,0,0,0" Stretch="None"/>
<TextBlock HorizontalAlignment="Left" Margin="14,6,-14,0" TextWrapping="Wrap" Text="Fundação Eugénio De Almeida" VerticalAlignment="Top" FontFamily="Helvetica" Foreground="Black" FontSize="14"/>
</Grid>
</Button>
<TextBlock HorizontalAlignment="Left" Margin="26,606,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="406" Height="22">
<Run FontFamily="Helvetica" Text="Fundação Eugénio de Almeida"/>
<LineBreak/>
<Run/>
</TextBlock>
<TextBlock HorizontalAlignment="Left" Margin="30,655,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="402" Height="85" FontFamily="Helvetica">
<Run Text="Páteo de São Miguel "/>
<LineBreak/>
<Run Text="Apartado 2001, 7001-901 Évora "/>
<LineBreak/>
<Run Text="Portugal"/>
<LineBreak/>
<Run/>
</TextBlock>
<TextBlock HorizontalAlignment="Left" Margin="30,745,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="406" Height="22" Text="Tel. (+351) 266 748 300 "/>
<TextBlock HorizontalAlignment="Left" Margin="30,773,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Grid.ColumnSpan="2" Width="406" Height="22">
<Run FontFamily="Helvetica" Text="Fax. (+ 351) 266 705 149"/>
<Run FontFamily="Helvetica"/>
<Run/>
</TextBlock>
</Grid>
</Grid>
and my .cs code is the following
public partial class Contactos : PhoneApplicationPage
{
public Contactos()
{
InitializeComponent();
Loaded +=Contactos_Loaded;
}
private void Contactos_Loaded(object sender, RoutedEventArgs e)
{
UpdateMap();
}
private void UpdateMap()
{
MapOverlay pin = new MapOverlay();
pin.Content = pushRed;
pin.GeoCoordinate = new GeoCoordinate(38.57325D, -7.90546);
pin.PositionOrigin = new Point(0, 0.5);
MapLayer pinLayer = new MapLayer();
pinLayer.Add(pin);
contactosMaps.Layers.Add(pinLayer);
contactosMaps.SetView(new GeoCoordinate(38.57325D, -7.90546), 14D);
}
private void Contactos_Btn1_Click(object sender, RoutedEventArgs e)
{
}
}
when i try to run my project, it loads the map but a few moments later i get this exception
"Additional information: Value does not fall within the expected range."
when i do the "contactosMaps.Layers.Add(pinLayer);"
can't i have that Grid with the image as a pushpin?
Use the Phone.Controls.Toolkit as described here:-
http://wp.qmatteoq.com/maps-in-windows-phone-8-and-phone-toolkit-a-winning-team-part-1/
The toolkit can be found at either of
http://phone.codeplex.com/
or
https://www.nuget.org/packages/WPtoolkit
You can then either add the image directly in your XAML as follows:-
<maps:Map Loaded="MapControl_Loaded" ZoomLevel="18" Name="MapControl">
<toolkit:MapExtensions.Children>
<toolkit:Pushpin x:Name="MyPushpin">
<toolkit:Pushpin.Template>
<ControlTemplate TargetType="toolkit:Pushpin">
<StackPanel>
<Image Source="/Images/MapScreen/MapScreenCurrentLocationPin.png" Stretch="Uniform" Width="50" Height="50" HorizontalAlignment="Center"/>
</StackPanel>
</ControlTemplate>
</toolkit:Pushpin.Template>
</toolkit:Pushpin>
</toolkit:MapExtensions.Children>
</maps:Map>
or you can add it in C# as follows:-
MapOverlay overlay = new MapOverlay
{
GeoCoordinate = myMap.Center,
Content = new Ellipse
{
Fill = new SolidColorBrush(Colors.Red),
Width = 40,
Height = 40
}
};
MapLayer layer = new MapLayer();
layer.Add(overlay);
myMap.Layers.Add(layer);
You should be able to add a Grid with an image instead of an ellipse as shown above.
Let me know if this worked for you.
Related
I'm not able to put my image and lines (the lines are drawn on top of the image) in the center of the 2nd column (the center column) of my grid. I always have lines and image left aligned...I almost tried everything (horizontalAlignment="center"...)
The code is the following:
<Page
x:Class="WhirlpoolSQC.DetailPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WhirlpoolSQC"
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>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Top">
<TextBox x:Name="textBox" Text="Defects" Margin="0,11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="24" IsReadOnly="True"/>
</StackPanel>
<Canvas Grid.Column="1" >
<Image Name="image_detail" VerticalAlignment="Center" Width="840"/>
<Canvas VerticalAlignment="Center" Width="840" >
<Line
X1="280" Y1="0"
X2="280" Y2="630"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3" />
<Line
X1="560" Y1="0"
X2="560" Y2="630"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3" />
<Line
X1="0" Y1="210"
X2="840" Y2="210"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3"/>
<Line
X1="0" Y1="420"
X2="840" Y2="420"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3"/>
</Canvas>
</Canvas>
<StackPanel Grid.Column="2" VerticalAlignment="Top">
<TextBox x:Name="textBox2" Text="List of defecs" Margin="0,11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="24" IsReadOnly="True"/>
<ListView x:Name="listView" HorizontalAlignment="Stretch" Margin="0,61,10,0" BorderThickness="1,1,1,1" RequestedTheme="Default" BorderBrush="Black" VerticalAlignment="Top" Height="536"/>
</StackPanel>
</Grid>
Basically, I need something like:
Furthermore, I would like that the image auto fit inside the column in a way that it is not cutted when I put full-screen.
I don't understand wherte is the isse.
thanks
I played around your code and made some changes to get what's shown in your wireframe. The image will always stay in the center and will move or scale according to the window size.
Desktop View
Mobile or Tablet View
//MainPage.Xaml
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" SizeChanged="YourPage_SizeChanged"
x:Name="YourPage"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Padding="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" MaxWidth="200" />
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="1*" MaxWidth="200" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Top" Padding="20">
<TextBlock x:Name="textBox1" Text="List of Affects" Margin="0,11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="Blue" />
<ListView x:Name="listView1" HorizontalAlignment="Stretch" Margin="0,40,0,0" BorderThickness="1,1,1,1" RequestedTheme="Default" BorderBrush="Black" VerticalAlignment="Stretch" >
<ListViewItem>Item1</ListViewItem>
<ListViewItem>Item2</ListViewItem>
<ListViewItem>Item3</ListViewItem>
</ListView>
</StackPanel>
<Grid Grid.Column="1" Padding="0" VerticalAlignment="Center" Background="White" HorizontalAlignment="Center" >
<Image Name="image_detail" MaxWidth="840" Source="ms-appx:///Assets/1.jpg" />
<Line x:Name="Line1"
X1="280" Y1="0"
X2="280" Y2="630"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3" />
<Line x:Name="Line2"
X1="560" Y1="0"
X2="560" Y2="630"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3" />
<Line x:Name="Line3"
X1="0" Y1="210"
X2="840" Y2="210"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3"/>
<Line x:Name="Line4"
X1="0" Y1="420"
X2="840" Y2="420"
Stroke="Black"
StrokeDashArray="2, 5"
StrokeThickness="3"/>
</Grid>
<StackPanel Grid.Column="2" VerticalAlignment="Top" Padding="20">
<TextBlock x:Name="textBox2" Text="List of defects" Margin="0,11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="Blue" />
<ListView x:Name="listView2" HorizontalAlignment="Stretch" Margin="0,40,0,0" BorderThickness="1,1,1,1" RequestedTheme="Default" BorderBrush="Black" VerticalAlignment="Stretch" >
<ListViewItem>Item1</ListViewItem>
<ListViewItem>Item2</ListViewItem>
<ListViewItem>Item3</ListViewItem>
</ListView>
</StackPanel>
</Grid>
//MainPage.Xaml.cs
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void YourPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
try
{if (image_detail.ActualHeight > 0 && image_detail.ActualWidth > 0)
{
Line1.Y2 = image_detail.ActualHeight;
Line1.X1 = image_detail.ActualWidth / 3;
Line1.X2 = image_detail.ActualWidth / 3;
Line2.Y2 = image_detail.ActualHeight;
Line2.X1 = (image_detail.ActualWidth / 3) * 2;
Line2.X2 = (image_detail.ActualWidth / 3) * 2;
Line3.X2 = image_detail.ActualWidth;
Line3.Y1 = image_detail.ActualHeight / 3;
Line3.Y2 = image_detail.ActualHeight / 3;
Line4.X2 = image_detail.ActualWidth;
Line4.Y1 = (image_detail.ActualHeight / 3) * 2;
Line4.Y2 = (image_detail.ActualHeight / 3) * 2;
}
}
catch { }
}
}
I have an ItemsControl with DataTemplate in my Page.Xaml and the code is like below:
<ItemsControl x:Name="chatUI" VerticalAlignment="Bottom">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="myGrid" Width="340" Background="{Binding Background}" HorizontalAlignment="{Binding GridHorizontalAlign}" Margin="10,0,10,10" MinHeight="45" BorderBrush="#FF003A4F" BorderThickness="0,0,0,2">
<Polygon Visibility="{Binding RightVisibility}" Fill="{Binding Background}" Points="0,0 5,6, 0,12" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,-5,0" />
<Polygon Visibility="{Binding LeftVisibility}" Fill="{Binding Background}" Points="5,0 0,6, 5,12" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="-5,0,0,0" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="{Binding Text}" TextWrapping="Wrap" FontSize="15" FontFamily="Segoe UI" Foreground="White" Margin="10,10,10,0"/>
<TextBlock Grid.Row="1" Text="{Binding Time}" TextWrapping="Wrap" FontSize="11" FontFamily="Segoe UI" Foreground="LightGray" Margin="10,0,10,5" VerticalAlignment="Bottom" TextAlignment="Right"/>
</Grid>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
What I need right now is getting Text which is bound to the TextBlock when I right click on the grid named myGrid. How is that possible in C#?
We can add the RightTapped event of the Grid, it will be fired when you right click the Grid.
In the RightTapped event we can use Grid.Children to get the collection of child elements of the Grid. That we can get the Grid in the root Grid that named myGrid. That we can use the Grid.Children to get the TextBlock in the Grid.
For example:
private async void myGrid_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
var RightTapGrid = sender as Grid;
var childernElements = RightTapGrid.Children;
foreach (var item in childernElements)
{
var grid = item as Grid;
if (grid != null)
{
var itemchildernElements = grid.Children;
foreach (var text in itemchildernElements)
{
var textBlock = text as TextBlock;
var dialog = new ContentDialog()
{
Title = textBlock.Text,
MaxWidth = this.ActualWidth
};
dialog.PrimaryButtonText = "OK";
dialog.SecondaryButtonText = "Cancel";
await dialog.ShowAsync();
break;
}
}
}
}
If you get your Binding Data from Class called ClassName
You can try this code
XAML:
<ListView x:Name="chatUI" VerticalAlignment="Bottom" SelectionChanged="chatUI_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid x:Name="myGrid" Width="340" Background="{Binding Background}" HorizontalAlignment="{Binding GridHorizontalAlign}" Margin="10,0,10,10" MinHeight="45" BorderBrush="#FF003A4F" BorderThickness="0,0,0,2">
<Polygon Visibility="{Binding RightVisibility}" Fill="{Binding Background}" Points="0,0 5,6, 0,12" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,-5,0" />
<Polygon Visibility="{Binding LeftVisibility}" Fill="{Binding Background}" Points="5,0 0,6, 5,12" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="-5,0,0,0" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="{Binding Text}" TextWrapping="Wrap" FontSize="15" FontFamily="Segoe UI" Foreground="White" Margin="10,10,10,0"/>
<TextBlock Grid.Row="1" Text="{Binding Time}" TextWrapping="Wrap" FontSize="11" FontFamily="Segoe UI" Foreground="LightGray" Margin="10,0,10,5" VerticalAlignment="Bottom" TextAlignment="Right"/>
</Grid>
</Grid>
</DataTemplate>
</Listview.ItemTemplate>
And add SelectionChanged Event :
private void chatUI_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ListView view = (ListView)sender;
//Get Selected Item
ClassName class = view.SelectedItem as ClassName;
string path = class.Text;
// Now we have Text of selected item in Listview
}
I writing app for UWP.
I have app very similar to Windows 10 Mail app.
I have this UI
Here is xaml of this screen
<Grid BorderBrush="White" BorderThickness="1">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/Background.png"/>
</Grid.Background>
<Grid HorizontalAlignment="Left" Height="720" VerticalAlignment="Top" Width="60" BorderBrush="#FFF5F1F1" BorderThickness="0,0,1,0">
<Button x:Name="MenuButton" Content="" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="38" Width="38">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="Images/Menu-100.png"/>
</Button.Background>
</Button>
<Button x:Name="logoutbutton" Content="" HorizontalAlignment="Left" Margin="10,650,0,0" VerticalAlignment="Top" Height="43" Width="38">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="Images/Logout_Button.png"/>
</Button.Background>
</Button>
</Grid>
<Grid HorizontalAlignment="Left" Height="47" Margin="63,2,-121,0" VerticalAlignment="Top" Width="1338" BorderBrush="#FFFDFDFD" Padding="0,0,0,1" BorderThickness="0,0,0,1">
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="В Работе" VerticalAlignment="Top" Height="47" Width="1218" FontSize="32" FontFamily="SF UI Display" Padding="550,0,0,0" Foreground="White"/>
</Grid>
<ScrollViewer HorizontalAlignment="Left" Height="668" Margin="63,52,0,0" VerticalAlignment="Top" Width="350">
<GridView x:Name="OrdersGridView" >
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel >
<Grid Height="204" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
<TextBlock Text="{Binding date_created}" HorizontalAlignment="Left" TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top" Width="350" Height="50" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" />
<TextBlock TextAlignment="Center" HorizontalAlignment="Left" Margin="0,146,-1,0" TextWrapping="Wrap" Text="{Binding billing.address_1}" VerticalAlignment="Top" Height="58" Width="350" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" />
<TextBlock HorizontalAlignment="Left" TextAlignment="Center" Margin="0,86,-1,0" TextWrapping="Wrap" Text="{Binding billing.first_name}" VerticalAlignment="Top" Height="60" Width="350" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" Padding="0,0,0,0"/>
</Grid>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</ScrollViewer>
</Grid>
I make Binding in code like this:
public async void Down()
{
RestAPI rest = new RestAPI("http://simplegames.com.ua/wp-json/wc/v1/", "ck_9d64c027d2c5f81b8bed3342eeccc6d337be813d", "cs_60697b1e6cbdeb8d62d19e0765e339f8e3334754");
WCObject wc = new WCObject(rest);
//Get all products
var orders = await wc.GetOrders(new Dictionary<string, string>() {
{ "per_page", "100" }, { "status","processing"} }); // Dodelat filtr dlaya teh chto v rabote
string products = orders.ToFormattedJsonString();
List<RootObject> rootObjectData = JsonConvert.DeserializeObject<List<RootObject>>(products);
foreach (RootObject root in rootObjectData)
{
string date = root.date_created;
string name = root.billing.first_name;
Orders = new ObservableCollection<RootObject>(rootObjectData) { new RootObject { date_created = date}
};
OrdersGridView.ItemsSource = Orders;
};
}
}
}
I need to open smth like Fragment.
Here is UI how it need to be like:
How I can do this?
Thank's for help so much!
I'm trying something new. I've got a few grids, and when I try to grab a grid i want to move its parent around my top grid. At the moment I get a System.NullReferenceException on m_startOffset = new Vector(translate.X, translate.Y); in the Grid_MouseDown method. Does someone know how i should tackle this problem?
UI:
<Grid x:Name="GridHost">
<Grid x:Name="GRLogin" Margin="1401,292,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="501" d:IsHidden="True" Focusable="True">
<Grid Height="30" VerticalAlignment="Top" Background="#FF1585B5" Margin="0" MouseLeftButtonUp="Grid_MouseUp" MouseLeftButtonDown="Grid_MouseDown" MouseMove="Grid_MouseMove" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="GRLoginClose" Content="X" Background="{x:Null}" Foreground="White" FontWeight="Bold" OpacityMask="Black" Margin="470,0,0,0" Width="30" Height="30" Click="Close"/>
<Button Content="-" Background="{x:Null}" Foreground="White" FontWeight="Bold" OpacityMask="Black" Margin="0,0,30,0" Width="30" Height="30" HorizontalAlignment="Right"/>
<Label Content="Login" HorizontalAlignment="Center" Margin="0" FontWeight="Bold"/>
</Grid>
<Grid HorizontalAlignment="Left" Height="250" Margin="0,30,0,0" VerticalAlignment="Top" Width="500" Background="#FF262626">
<PasswordBox HorizontalAlignment="Center" Margin="206,130,120,94" VerticalAlignment="Center" Width="174"/>
<Label Content="Password" HorizontalAlignment="Center" Margin="122,130,308,94" VerticalAlignment="Center" RenderTransformOrigin="-1.737,0.462" Width="70"/>
<Label Content="Username" HorizontalAlignment="Center" Margin="122,99,308,125" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Width="70"/>
<TextBox HorizontalAlignment="Center" Height="23" Margin="206,99,120,125" TextWrapping="Wrap" VerticalAlignment="Center" Width="174" RenderTransformOrigin="0.467,-0.346"/>
<Button Content="Login" HorizontalAlignment="Left" VerticalAlignment="Top" Width="258" Margin="122,180,0,0" Height="40" Background="#FF1585B5" Foreground="White" FontWeight="Bold"/>
</Grid>
</Grid>
Movement code:
private void Grid_MouseDown(object sender, MouseButtonEventArgs e)
{
FrameworkElement element = ((Grid)sender).Parent as Grid;
TranslateTransform translate = element.RenderTransform as TranslateTransform;
m_start = e.GetPosition(GridHost);
m_startOffset = new Vector(translate.X, translate.Y);
element.CaptureMouse();
}
private void Grid_MouseMove(object sender, MouseEventArgs e)
{
FrameworkElement element = ((Grid)sender).Parent as Grid;
TranslateTransform translate = element.RenderTransform as TranslateTransform;
if (element.IsMouseCaptured)
{
Vector offset = Point.Subtract(e.GetPosition(GridHost), m_start);
translate.X = m_startOffset.X + offset.X;
translate.Y = m_startOffset.Y + offset.Y;
}
}
private void Grid_MouseUp(object sender, MouseButtonEventArgs e)
{
FrameworkElement element = ((Grid)sender).Parent as Grid;
element.ReleaseMouseCapture();
}
Declare the parent Grid's RenderTransform in the XAML:
<Grid x:Name="GRLogin" Margin="1401,292,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="501" d:IsHidden="True" Focusable="True">
<Grid.RenderTransform>
<TranslateTransform/>
</Grid.RenderTransform>
...
</Grid>
You could also check the RenderTransform for null, in which case you set it: element.RenderTransform = new TranslateTransform();
I have a ListBox which I add items to. Each time i select an item which is an object of a Person this person properties should be showed in textboxes. This person have person properties like age, name, sex and so on.
my listbox selection changed event only triggers one time or on new added items. It doesn't trigger when i click and an that is not just added.
Mainwindow.xaml.cs
namespace GUI_WPF_Eksamen
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
Backlog bl = new Backlog();
public MainWindow()
{
InitializeComponent();
DataContext = bl;
this.PriorityComboBox.Items.Add("High");
this.PriorityComboBox.Items.Add("Medium");
this.PriorityComboBox.Items.Add("Low");
}
private void AddToProductBackLogBtn_Click(object sender, RoutedEventArgs e)
{
this.ProductBacklogList.Items.Add(bl);
this.NameTextBox.Text = String.Empty;
}
private void ProductBacklogList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var item = this.ProductBacklogList.SelectedItem as Backlog;
this.NameLabel.Content = item.NAME;
this.DescriptionTextBlock.Text = item.DESCRIPTION;
this.PriorityLabel.Content = item.PRIORITY;
this.TimeLabel.Content = item.TIME;
}
private void AddToSprint_Click(object sender, RoutedEventArgs e)
{
var currentItem = this.ProductBacklogList.SelectedItem as Backlog;
this.SprintBacklogList.Items.Add(currentItem);
}
}
}
Mainwindow.xaml
<Window x:Class="GUI_WPF_Eksamen.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:GUI_WPF_Eksamen"
Title="GUI WPF application" Height="800" Width="1200">
<Window.Background>
<ImageBrush ImageSource="Images/chalkboard.jpg"/>
</Window.Background>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="69*"/>
<RowDefinition Height="700*"/>
</Grid.RowDefinitions>
<Label x:Name="Title" Content="SCRUM-BOARD XXL" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Margin="15,10,5,0" VerticalAlignment="Top" Width="1172" Height="56" FontSize="36" FontStyle="Italic" FontWeight="Bold" Foreground="White"/>
<Grid HorizontalAlignment="Left" Height="680" Margin="15,10,0,0" Grid.Row="1" VerticalAlignment="Top" Width="354">
<Grid.RowDefinitions>
<RowDefinition Height="94*"/>
<RowDefinition Height="44*"/>
<RowDefinition Height="131*"/>
<RowDefinition Height="53*"/>
<RowDefinition Height="40*"/>
<RowDefinition Height="46*"/>
<RowDefinition Height="272*"/>
</Grid.RowDefinitions>
<Label Content="Navn" HorizontalAlignment="Left" Margin="0,44,0,0" VerticalAlignment="Top" Width="77" FontSize="16" Foreground="White"/>
<Label Content="Beskrivelse
" HorizontalAlignment="Left" Margin="0,10,0,0" VerticalAlignment="Top" Foreground="White" FontSize="16" Height="31" Grid.Row="1"/>
<Label Content="Prioritet" HorizontalAlignment="Left" Margin="0,7,0,0" VerticalAlignment="Top" Width="67" FontSize="16" Foreground="White" Grid.Row="3"/>
<Label Content="Estimeret tidsforbrug" HorizontalAlignment="Left" Margin="0,10,0,0" VerticalAlignment="Top" Foreground="White" FontSize="16" Grid.Row="4" Grid.RowSpan="2"/>
<TextBox x:Name="NameTextBox" HorizontalAlignment="Left" Height="23" Margin="51,52,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="303" Opacity="0.5" Text="{Binding Path=NAME}"/>
<ComboBox x:Name="PriorityComboBox" HorizontalAlignment="Left" Margin="73,12,0,0" VerticalAlignment="Top" Width="152" RenderTransformOrigin="0.5,0.5" Opacity="0.5" Grid.Row="3" SelectedItem="{Binding Path=PRIORITY}">
<ComboBox.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="0.036"/>
<TranslateTransform/>
</TransformGroup>
</ComboBox.RenderTransform>
</ComboBox>
<TextBox x:Name="TimeTextBox" HorizontalAlignment="Left" Height="23" Margin="0,6,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="204" Opacity="0.5" Grid.Row="5" Text="{Binding Path=TIME}"/>
<Label Content="time(r)" HorizontalAlignment="Left" Margin="209,38,0,0" VerticalAlignment="Top" Foreground="White" FontSize="16" Width="57" Grid.Row="4" Grid.RowSpan="2"/>
<TextBox x:Name="DescriptionTextBox" HorizontalAlignment="Left" Height="111" Margin="0,10,0,0" Grid.Row="2" TextWrapping="Wrap" VerticalAlignment="Top" Width="354" Opacity="0.5" Text="{Binding Path=DESCRIPTION}"/>
<Button x:Name="AddToProductBackLogBtn" Content="Add Backlog item" HorizontalAlignment="Left" Grid.Row="6" VerticalAlignment="Top" Width="200" Height="27" Margin="66,0,0,0" Background="White" Opacity="0.7" Click="AddToProductBackLogBtn_Click"/>
</Grid>
<Grid HorizontalAlignment="Left" Height="680" Margin="374,10,0,0" Grid.Row="1" VerticalAlignment="Top" Width="808" RenderTransformOrigin="0.459,0.431">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="79*"/>
<ColumnDefinition Width="47*"/>
<ColumnDefinition Width="76*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="209*"/>
<RowDefinition Height="131*"/>
</Grid.RowDefinitions>
<Label Content="Navn" HorizontalAlignment="Left" Margin="10,10,0,0" Grid.Row="1" VerticalAlignment="Top" FontSize="16" Foreground="White" Height="31" Width="47"/>
<Label Content="Beskrivelse" HorizontalAlignment="Left" Margin="10,55,0,0" Grid.Row="1" VerticalAlignment="Top" Foreground="White" FontSize="16" Height="31" Width="87"/>
<Label Content="Prioritet
" HorizontalAlignment="Left" Margin="10,10,0,0" Grid.Row="1" VerticalAlignment="Top" Foreground="White" FontSize="16" Height="32" Grid.Column="1" Width="66"/>
<Label Content="Estimeret tidsforbrug" Grid.Column="1" HorizontalAlignment="Left" Margin="10,55,0,0" Grid.Row="1" VerticalAlignment="Top" Foreground="White" FontSize="16" Height="31" Width="159"/>
<Label x:Name="PriorityLabel" Content="" Grid.Column="1" HorizontalAlignment="Left" Margin="90,10,0,0" Grid.Row="1" VerticalAlignment="Top" FontSize="16" Foreground="White" Width="79" Height="31"/>
<Label x:Name="TimeLabel" Grid.Column="2" HorizontalAlignment="Left" Margin="10,55,0,0" Grid.Row="1" VerticalAlignment="Top" Foreground="White" FontSize="16" Width="208" Height="31"/>
<ListBox x:Name="ProductBacklogList" HorizontalAlignment="Left" Height="353" Margin="10,55,0,0" VerticalAlignment="Top" Width="292" DisplayMemberPath="NAME" Opacity="0.505" SelectionChanged="ProductBacklogList_SelectionChanged" RenderTransformOrigin="0.5,0.5">
<ListBox.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleY="-0.195"/>
<RotateTransform/>
<TranslateTransform Y="-0.497"/>
</TransformGroup>
</ListBox.RenderTransform>
</ListBox>
<ListBox x:Name="SprintBacklogList" HorizontalAlignment="Left" Height="353" Margin="10,55,0,0" VerticalAlignment="Top" Width="284" DisplayMemberPath="NAME" Grid.Column="2" Opacity="0.5"/>
<Label x:Name="NameLabel" HorizontalAlignment="Left" Margin="62,14,0,0" Grid.Row="1" VerticalAlignment="Top" Width="244" Height="27" Content="{Binding Path=NAME}" Foreground="White"/>
<Button x:Name="AddToSprint" Content="Add >>" Grid.Column="1" HorizontalAlignment="Left" Margin="54,201,0,0" VerticalAlignment="Top" Width="75" Height="20" Opacity="0.7" Click="AddToSprint_Click"/>
<TextBlock x:Name="DescriptionTextBlock" HorizontalAlignment="Left" Margin="10,86,0,0" Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Top" Height="166" Width="296" Foreground="White"/>
</Grid>
</Grid>
That way of selection changed can be accomplished easily:
Have a look here:
<Window x:Class="ListBoxSelection.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<DockPanel>
<ListBox ItemsSource="{Binding persons}" IsSynchronizedWithCurrentItem="True" DockPanel.Dock="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" Margin="5,0"/>
<TextBlock Text="{Binding Age, StringFormat=is {0} years old}" Margin="5,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<StackPanel Orientation="Horizontal" DataContext="{Binding persons}" DockPanel.Dock="Top">
<TextBlock Text="You have selected: " FontWeight="SemiBold"/>
<TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}"
Margin="5,0"
FontWeight="SemiBold"
VerticalAlignment="Top"
HorizontalAlignment="Center"/>
<TextBox Text="{Binding Age, UpdateSourceTrigger=PropertyChanged}"
Margin="5,0"
FontWeight="SemiBold"
VerticalAlignment="Top"
HorizontalAlignment="Left"/>
</StackPanel>
<Button Content="Add Item" DockPanel.Dock="Top" Width="60" VerticalAlignment="Top" Margin="20" Click="btnAddItem_Click"/>
</DockPanel>
Note this down: IsSynchronizedWithCurrentItem="True"
From MSDN:
Gets or sets a value that indicates whether a Selector should keep the
SelectedItem synchronized with the current item in the Items property.
What's the next step? Display the selected item:
<StackPanel DataContext="{Binding persons}"/>
StackPanel is not an ItemsControl, it will not try to display all the items in persons but instead it will look for the selected one.
The ICollectionView interface contains a member called CurrentItem. What the IsSynchronizedWithCurrentItem does is: whenever an item is clicked on the ItemsControl, it sets the CurrentItem for the collection view. The ICollectionView also has two events: CurrentItemChanging and CurrentItemChanged. When the IsSynchronizedWithCurrentItem property is set, the ItemsControl will update the SelectedItem based on what the ICollectionView's CurrentItem is.
Further more, using UpdateSourceTrigger=PropertyChanged you will be able to update you selected item and this will be immediately displayed in the ListBox.
OK, that's about, here is the rest of the code:
public class Person : INotifyPropertyChanged
{
private string _Name;
public string Name
{
get { return _Name; }
set
{
_Name = value;
PropertyChanged(this, new PropertyChangedEventArgs("Name"));
}
}
private int _Age;
public int Age
{
get { return _Age; }
set
{
_Age = value;
PropertyChanged(this, new PropertyChangedEventArgs("Age"));
}
}
public event PropertyChangedEventHandler PropertyChanged = delegate { };
}
And the codebehind:
public partial class MainWindow : Window
{
public ObservableCollection<Person> persons { get; set; }
public Person SelectedPerson
{
get { return (Person)GetValue(SelectedPersonProperty); }
set { SetValue(SelectedPersonProperty, value); }
}
// Using a DependencyProperty as the backing store for SelectedPerson. This enables animation, styling, binding, etc...
public static readonly DependencyProperty SelectedPersonProperty =
DependencyProperty.Register("SelectedPerson", typeof(Person), typeof(MainWindow), new PropertyMetadata(null));
public MainWindow()
{
InitializeComponent();
persons = new ObservableCollection<Person>();
persons.Add(new Person() { Name = "Name1", Age = 20 });
persons.Add(new Person() { Name = "Name2", Age = 25 });
persons.Add(new Person() { Name = "Name3", Age = 30 });
this.DataContext = this;
}
private void btnAddItem_Click(object sender, RoutedEventArgs e)
{
persons.Add(new Person() { Name = "NameAdded", Age = 50 });
}
}
As you see, your SelectionChanged handler is not needed anymore.
You may be asking, what is that SelectedPerson in the code behind:
Add this binding on the ListBox:
SelectedItem="{Binding SelectedPerson}"
And in that AddToSprint_Click use the SelectedPerson to get the Person instead of directly accessing the ListBox.