I have create textblocks in my grid in my wpf application. I know how to create the click event. But I'm not sure how to get properties from that cell. The properties I want Grid.Row and Grid.Column. How can I do this?
<Window x:Class="TicTacToe.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Tic-Tac-Toe" Height="356" Width="475">
<Grid VerticalAlignment="Top" ShowGridLines="True" Height="313" Margin="10,10,2,0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="o" TextAlignment="Center" FontSize="72" FontFamily="Lucida Bright" FontWeight="Bold"></TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" MouseLeftButtonDown="ChoosePosition" ></TextBlock>
<TextBlock Grid.Row="0" Grid.Column="2" ></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0" ></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1" ></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="2" ></TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0" ></TextBlock>
<TextBlock Grid.Row="2" Grid.Column="1" ></TextBlock>
<TextBlock Grid.Row="2" Grid.Column="2" ></TextBlock>
</Grid>
</Window>
private void ChoosePosition(object sender, MouseButtonEventArgs e)
{
}
As Grid.Row and Grid.Column are attached properties from the Grid class, you can get them using this syntax:
int row = Grid.GetRow(myTextBox);
int column = Grid.GetColumn(myTextBox);
In your case, you can cast the sender argument in the Click handler, so it would look like this:
var myTextBox = sender as TextBox;
if(myTextBox != null) {
int row = Grid.GetRow(myTextBox);
int column = Grid.GetColumn(myTextBox);
}
Have you checked the sender parameter? That will give you a reference to the textbox object which might be all you need depending on what you are trying to do.
Just change TextBox to TextBlock
Related
I have just started learning windows app development. Like what do we call it (A dialog box, Contentdialogbox, Message Dialog)? Thanks in advance.
Okay I tried this since I have my data in a datatemplate inside a contentpresenter(Making a master detail view) now when user clicks on a icon the popup should open and also display the data related to that event selected inside that list.How do I achieve this since the popup dialog control is defined inside a datatemplate so in my cs file it does not recognize the control so I am not able to open the popup dialog.
Xaml Code:
<DataTemplate x:Key="DetailContentTemplate" x:DataType="data:Event">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="50" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="Section2" Grid.Row="0">
<Grid.Background>
<ImageBrush ImageSource="ms-appx:///Assets/8.JPG" Stretch="Fill" />
</Grid.Background>
<TextBlock MaxWidth="250"
Margin="36,62,34,68"
FontFamily="Baskerville Old Face"
FontSize="30"
Foreground="{ThemeResource ToggleButtonPressedForegroundThemeBrush}"
TextWrapping="WrapWholeWords"
d:LayoutOverrides="Width, LeftPosition, RightPosition, TopPosition, BottomPosition">
<Run Text="Gravitas Premier League" />
</TextBlock>
</Grid>
<Grid x:Name="Content"
Grid.Row="1"
Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<RelativePanel>
<SymbolIcon x:Name="symbol"
Margin="0,0,5,0"
HorizontalAlignment="Left"
RelativePanel.AlignLeftWithPanel="True"
Symbol="Globe" />
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
RelativePanel.RightOf="symbol"
Style="{ThemeResource BaseTextBlockStyle}"
Text="Category" />
</RelativePanel>
</StackPanel>
<StackPanel Grid.Column="1" HorizontalAlignment="Center">
<RelativePanel>
<SymbolIcon x:Name="symboll"
Margin="0,0,5,0"
HorizontalAlignment="Left"
RelativePanel.AlignLeftWithPanel="True"
Symbol="People" />
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
RelativePanel.RightOf="symboll"
Style="{ThemeResource BaseTextBlockStyle}"
Text="SubCategory" />
</RelativePanel>
</StackPanel>
<StackPanel Grid.Column="2" HorizontalAlignment="Right">
<RelativePanel>
<SymbolIcon x:Name="symbllol"
Margin="0,0,5,0"
HorizontalAlignment="Left"
RelativePanel.AlignLeftWithPanel="True"
Symbol="Bullets" />
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
RelativePanel.RightOf="symbllol"
Style="{ThemeResource BaseTextBlockStyle}"
Text="Rupee" />
</RelativePanel>
</StackPanel>
</Grid>
<TextBlock Grid.Row="2"
HorizontalAlignment="Center"
Style="{ThemeResource ScenarioDescriptionTextStyle}"
Text="{x:Bind description}"
TextWrapping="WrapWholeWords" />
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SymbolIcon Grid.Column="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Symbol="Phone" />
<SymbolIcon Grid.Column="1"
x:Name="People"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Symbol="People"
IsTapEnabled="True"
Tapped="ShowPopupOffsetClicked"
/>
<SymbolIcon Grid.Column="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Symbol="Mail" />
</Grid>
</Grid>
</DataTemplate>
Now how do I open up the popup when the user taps the symbol with the name People and with necessary bindings of data with a observablecollection say EventList.
There are a lot of ways to implement the UI like in your screenshot. As you've added template10 in your question, I suppose you are using Template10 in your project. And in Template10, we can use ModalDialog to implement this. Here I use a Minimal Template 10 project for example.
Firstly, we may need to change ModalBackground to make the background color looks like what in your screenshot. As the ModalDialog we used here is the root frame created by Bootstrapper automatically, so we need override CreateRootElement in App.xaml.cs like:
public override UIElement CreateRootElement(IActivatedEventArgs e)
{
var b = Current;
var frame = new Windows.UI.Xaml.Controls.Frame();
var nav = b.NavigationServiceFactory(BackButton.Attach, ExistingContent.Include, frame);
//change background
var background = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.Gray);
background.Opacity = 0.2;
return new Template10.Controls.ModalDialog
{
ModalBackground = background,
DisableBackButtonWhenModal = true,
Content = nav.Frame
};
}
Then we can edit Busy.xaml to implement the panel in your screenshot. In Busy.xaml, it's a UserControl used as the ModalContent of ModalDialog. For example,
<UserControl x:Class="T10Minimal.Views.Busy"
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:local="using:T10Minimal.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="300"
d:DesignWidth="400"
mc:Ignorable="d">
<Grid Width="300"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="White"
CornerRadius="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
...
</Grid.RowDefinitions>
<TextBlock Margin="20,0"
VerticalAlignment="Center"
FontSize="24"
Foreground="Black">
Song Options
</TextBlock>
<Button Margin="12"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Click="CloseClicked"
Foreground="Black"
Style="{StaticResource TextBlockButtonStyle}">
<SymbolIcon Symbol="Clear" />
</Button>
...
</Grid>
</UserControl>
The bindings might like the BusyText in the original control, you can change its type to your binding data's type and also change the SetBusy method. After this, you can call SetBusy method in your ShowPopupOffsetClicked method to open the "popup".
This is just a simple sample, you can refer to it to implement your own. And in the sample, I used the ModalDialog created as the root frame of the application. If you need more than one ModalDialog, you can refer to Search (and Login) Sample on GitHub.
I have a problem. I have listbox.ItemTemplate with Grid inside.
<ListBox x:Name="listBox" Foreground="Black" FontSize="23" Height="470">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,40" Height="80">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="stopName_TextBlock" Grid.Column="1" Text="{Binding Title}" Foreground="Black" FontSize="23"/>
<TextBlock x:Name="time_TextBlock" Grid.Column="2" Text="{Binding Time}" Foreground="Black" FontSize="23"/>
<Grid x:Name="firstGraphic" Visibility="Collapsed" Grid.Column="0">
<Rectangle Grid.Row="1" Height="40" Fill="#2575B0" Width="10" VerticalAlignment="Bottom"/>
<Ellipse Grid.Row="1" Fill="#2575B0" Height="20" Width="20"/>
</Grid>
<Grid x:Name="midleGraphic" Visibility="Collapsed" Grid.Column="0">
<Rectangle Height="80" Width="10" Fill="#2575B0"/>
<Rectangle Height="10" Width="30" Fill="#2575B0" HorizontalAlignment="Right" RadiusX="5" RadiusY="5"/>
</Grid>
<Grid x:Name="lastGraphic" Visibility="Collapsed" Grid.Column="0">
<Rectangle Grid.Row="2" Height="40" Fill="#2575B0" Width="10" VerticalAlignment="Top"/>
<Ellipse Grid.Row="2" Height="20" Width="20" Fill="#2575B0"/>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
My listbox will have 20-25 items. First item will have firstGrahic Grid. Last item - lastGraphic Grid. And the others - midleGraphic Grid. I created all this Grids, but a dont know how I can find this Grids in C# code. I want change Visability property for them.
for (int i = 0; i < mainList.Count; i++)
{
listBox.Items.Add(mainList[i]);
if (i == 0)
{
Grid grid = (Grid)this.listBox.FindName("firstGraphic");
grid.Visibility = System.Windows.Visibility.Visible;
}
}
This example with first Item, but object grid = null.
Please help me.
As I can see your model contains properties Title and Time which are bound to TextBlocks. You can also add new propery to the model, for example:
public Visibility FirstGraphicVisibility { get; set; }
and bind it to the Grid Visibility, eg:
<Grid x:Name="firstGraphic" Visibility="{Binding FirstGraphicVisibility}" Grid.Column="0">
next just change FirstGraphicVisibility propery in your source list mainList and set ItemsSource of ListBox:
ListBox.ItemsSource = mainList;
I'm developing windows phone 8.1 app, and I need to get value of textboxes named:"time_tb" and "task_text_tb", that are in my selected item. This is my Xaml code:
<ListBox x:Name="list" ItemsSource="{Binding tasks}" Background="White" Margin="-1,50,-1,63">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="1" Height="76" Tapped="Grid_Tapped" Width="389">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="83*" />
<ColumnDefinition Width="307*" />
</Grid.ColumnDefinitions>
<TextBox x:Name="time_tb" Margin="0,15,276,0" TextWrapping="Wrap" Text="{Binding time}" VerticalAlignment="Top" BorderBrush="#FF49B7DC" Width="83" Height="45" FontSize="18.667" Foreground="{x:Null}" Background="White" FontFamily="Segoe UI Emoji" IsReadOnly="True" TextAlignment="Center" HorizontalAlignment="Right" Grid.ColumnSpan="2"/>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock x:Name="task_text_tb" Margin="63,14,10,39.833" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="{Binding wht}" FontSize="16" SelectionHighlightColor="#FF1455B3" Grid.RowSpan="2" />
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<StackPanel Height="100" Width="100"/>
</ListBox>
In your viewmodel, keep a property for the SelectedItem (binded to your list selectedItem) and 2 property for the textboxes of the current selected item that you will update when SelectedItem is changed. Then bind those 2 properties to where you want to show the values.
You may have to do some magic to find the actual selected item, because i think selected item only returns an index or something...
Hope this helps
I have a ListBox bound to some data, all with an ItemTemplate set, I want to fire PointerPressed Event from this list by pressing anywhere in the ListBox area (cause I just need that for some purpose), but apparently the Selection of the items is preventing that, (I'm using commands) here's my code
<ScrollViewer x:Name="sv"
x:FieldModifier="public"
VerticalScrollBarVisibility="Visible"
VerticalScrollMode="Enabled"
HorizontalScrollBarVisibility="Disabled"
HorizontalScrollMode="Disabled">
<ListBox x:Name="lb"
ItemsSource="{Binding Path=Tweets}">
<WinRTBehaviors:Interaction.Behaviors>
<Win8LnBehaviors:EventToCommandBehavior Event="PointerPressed"
Command="svPointerPressed"
PassEventArgsToCommand="True" />
</WinRTBehaviors:Interaction.Behaviors>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="65">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
</Grid.RowDefinitions>
<Image x:Name="Img_ProfilePicture"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
Stretch="Fill"
Source="{Binding ProfilePictureSource}"
Margin="2">
</Image>
<TextBlock x:Name="Tb_ProfileName"
Grid.Row="0"
Grid.Column="1"
Text="{Binding UserName}"
Margin="5,0,0,0"
FontFamily="Segoe UI Mono"
FontSize="12"
FontWeight="Bold" />
<TextBlock x:Name="Tb_FeedTime"
Grid.Row="0"
Grid.Column="2"
Text="{Binding StatusDateTime}"
Margin="5,0,0,0"
FontFamily="Segoe UI Light"
FontSize="10" />
<TextBlock x:Name="Tb_FeedData"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
Text="{Binding Status}"
Margin="10,0,0,0"
FontFamily="Wasco Sans"
TextWrapping="Wrap">
</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
The code behind :
public RelayCommand<RoutedEventArgs> svPointerPressed
{
get
{
return new RelayCommand<RoutedEventArgs>((routedEventArgs) =>
{
_dispatcher = Window.Current.Dispatcher;
_dispatcher.RunAsync(CoreDispatcherPriority.High, () =>
{
MessageDialog m = new MessageDialog("Tapped !");
m.ShowAsync();
});
});
}
private set{}
}
I even tried to fire the PointerPressed event from one of the components like those TextBoxes but still not firing.
I'd be so thankful , thx
I'd go and just give up at this point. A ScrollViewer filters out pointer events and you will be better off figuring out an alternative design.
I'm using a ExpanderView to display some data in my app. But I'm having some difficulty trying to find out how to get an ExpanderViewItem's data after it's been selected.
On a ListBox you can call SelectionChanged="yourFunction" in your xaml code.. but for the expanderview I have no idea how to do this?
This is my XAML code for the expander:
<!--Custom header template-->
<DataTemplate x:Key="CustomHeaderTemplate">
<TextBlock Text="" FontSize="28" />
</DataTemplate>
<!--Custom expander template-->
<DataTemplate x:Key="CustomExpanderTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Width="400" Height="60" Fill="#FFF1F1F1" HorizontalAlignment="Stretch" StrokeThickness="0" Grid.Row="0" Grid.Column="0" />
<TextBlock Text="{Binding procedureName}" FontSize="30" Foreground="#FF00457C" FontWeight="Normal" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Margin="10,0,0,0" />
</Grid>
</DataTemplate>
<!--Custom expander items template-->
<DataTemplate x:Key="ExpanderViewItems" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="15" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding flagIcon}" Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" />
<TextBlock FontSize="26" Text="{Binding N}" Foreground="Black" FontWeight="Normal" Grid.Row="0" Grid.Column="1"/>
<TextBlock FontSize="20" Text="{Binding RNG}" Foreground="Black" FontWeight="Normal" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="2"/>
<TextBlock FontSize="26" Text="{Binding ValueAndUnit}" Foreground="Black" FontWeight="Medium" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>
<TextBlock FontSize="18" Text="{Binding COM}" Foreground="Black" FontWeight="Normal" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" TextWrapping="Wrap" />
<Line StrokeThickness="1" Stroke="#C4C6CC" Stretch="Fill" X1="0" X2="1" Y1="0" Y2="0" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" />
</Grid>
</DataTemplate>
<!--Listbox Containing ExpanderViews-->
<ListBox Name="testsList" Grid.Row="3" Grid.Column="0" >
<ListBox.ItemTemplate>
<DataTemplate>
<!--ExpanderView-->
<toolkit:ExpanderView Header="{Binding}"
HeaderTemplate="{StaticResource CustomHeaderTemplate}"
Expander="{Binding}"
ExpanderTemplate="{StaticResource CustomExpanderTemplate}"
x:Name="expander"
FontSize="36"
Foreground="#FF00457C"
ItemsSource="{Binding testItems}"
ItemTemplate="{StaticResource ExpanderViewItems}" >
</toolkit:ExpanderView>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I'd really appreciate any help in the right direction! This seems to be a question that is not easily answered around the web.
#Frederik I've implemented what you've done in the code above using the SelectionChanged event of the ListBox - it still works fine for me.
I've been banging my head against the wall for a bit, but finally managed to solve it. First of all for the ItemTemplate I've made sure that the template is placed in a ListBoxItem element as it follows:
<DataTemplate x:Key="ExpanderViewItems" >
<ListBoxItem DataContext="{Binding}" Tap="ListBoxItem_Tap_1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="15" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding flagIcon}" Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" />
<TextBlock FontSize="26" Text="{Binding N}" Foreground="Black" FontWeight="Normal" Grid.Row="0" Grid.Column="1"/>
<TextBlock FontSize="20" Text="{Binding RNG}" Foreground="Black" FontWeight="Normal" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="2"/>
<TextBlock FontSize="26" Text="{Binding ValueAndUnit}" Foreground="Black" FontWeight="Medium" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>
<TextBlock FontSize="18" Text="{Binding COM}" Foreground="Black" FontWeight="Normal" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" TextWrapping="Wrap" />
<Line StrokeThickness="1" Stroke="#C4C6CC" Stretch="Fill" X1="0" X2="1" Y1="0" Y2="0" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" />
</Grid>
</ListBoxItem>
</DataTemplate>
Once this is in place, go in the code behind and in the Tap event declared for the ListBoxItem use something like this:
ListBoxItem item = sender as ListBoxItem;
ExpanderItemModel model = item.DataContext as ExpanderItemModel;
Of course, ExpanderItemModel will be whatever you're using for your expander items...
This worked fine for me
Hope this helps!
Good luck!
You can use the "tap" event on the listbox:
In your XAML file add a tap event listner:
<!--Listbox Containing ExpanderViews-->
<ListBox Name="testsList" Grid.Row="3" Grid.Column="0" Tap="testsList_Tap" >
<ListBox.ItemTemplate>
<DataTemplate>
<!--ExpanderView-->
<toolkit:ExpanderView Header="{Binding}"
...
In your code behind file, implement the tap handler:
private void testsList_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
someModel selectedItem = (someModel)this.testsList.SelectedItem;
// Do something with your seleted data
...
}
you can get the selected values by listbox selectionchanged or expanderview expanded events.
For listbox :
private void lstExams_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (e.AddedItems.Count > 0)
{
Model.ExamTitles data = (sender as ListBox).SelectedItem as Model.ExamTitles;
}
}
Here ExamTitles is a class which contains collections
For expanderview Expanded
private void ExpanderView_Expanded(object sender, RoutedEventArgs e)
{
ExpanderView expview = (sender as ExpanderView);
Model.ExamTitles data = expview.Header as Model.ExamTitles;
}
Hope this helps!