I have this xaml code on one of the windows in my app:
<phone:PanoramaItem x:Name="panoramaItemSend" Header="{Binding LocalizedResources.send, Source={StaticResource LocalizedStrings}}" >
<StackPanel Margin="12,0,0,0">
<TextBlock Text="{Binding LocalizedResources.recipientEmail, Source={StaticResource LocalizedStrings}}" />
<TextBox InputScope="EmailUserName" Text="{Binding SendModel.Email, Mode=TwoWay}" Margin="-12,0,0,0" TabIndex="100" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" MaxLength="256" Height="105" TextWrapping="Wrap">
<i:Interaction.Behaviors>
<prismInteractivity:UpdateTextBindingOnPropertyChanged/>
</i:Interaction.Behaviors>
</TextBox>
<TextBlock Text="{Binding LocalizedResources.amount, Source={StaticResource LocalizedStrings}}" />
<TextBox x:Name="txtSendAmount" InputScope="Number" Text="{Binding SendModel.Amount, Mode=TwoWay}" Margin="-12,0,0,0" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" TabIndex="101" MaxLength="20" TextChanged="TextBox_TextChanged" >
<i:Interaction.Behaviors>
<prismInteractivity:UpdateTextBindingOnPropertyChanged/>
</i:Interaction.Behaviors>
</TextBox>
<TextBlock Text="{Binding SendModel.AmountFiatStr}" Margin="0,-15,0,5" Foreground="Gainsboro"/>
<TextBlock Text="{Binding LocalizedResources.label, Source={StaticResource LocalizedStrings}}" />
<TextBox Text="{Binding SendModel.Label, Mode=TwoWay}" Margin="-12,0,0,0" TabIndex="102" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" MaxLength="256">
<i:Interaction.Behaviors>
<prismInteractivity:UpdateTextBindingOnPropertyChanged/>
</i:Interaction.Behaviors>
</TextBox>
<TextBlock Text="{Binding LocalizedResources.message, Source={StaticResource LocalizedStrings}}" />
<TextBox Text="{Binding SendModel.Message, Mode=TwoWay}" Margin="-12,0,0,0" TabIndex="103" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" MaxLength="256">
<i:Interaction.Behaviors>
<prismInteractivity:UpdateTextBindingOnPropertyChanged/>
</i:Interaction.Behaviors>
</TextBox>
<Button x:Name="btnSend" Content="{Binding LocalizedResources.send, Source={StaticResource LocalizedStrings}}" Style="{StaticResource OrangeButton}" Tap="btnSend_Tap" TabIndex="104"/>
</StackPanel>
I want to create a popup when I trigger btnSend's Tap handler - btnSendTap
My popup should have this grid full of accounts that I already know how to add programatically:
<Grid Margin="15,0,0,21">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel x:Name="AccountsInfo" Grid.Row="0">
</StackPanel>
<StackPanel Grid.Row="1">
<local:RateChart x:Name="rateChart" Height="324" Margin="-12,25,0,0" Width="417" />
</StackPanel>
</Grid>
Have a look at the PopUp control.
Hope that is what you are looking for. :)
Related
I'm using materialDesign open source UI library to develop, for I want to use data template to display, the code is as follows, but the display style of the interface is not correct, the display logic is also not correct
<materialDesign:Card>
<TabControl VerticalContentAlignment="Top" materialDesign:ColorZoneAssist.Mode="PrimaryMid"
ItemsSource="{Binding IndexMenus}" Style="{StaticResource MaterialDesignNavigationRailTabControl}">
<b:Interaction.Triggers>
<b:EventTrigger EventName="SelectionChanged">
<b:InvokeCommandAction Command="{Binding NavigateCommand}"
CommandParameter="{Binding SelectedItem, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=TabControl}}" />
</b:EventTrigger>
</b:Interaction.Triggers>
<TabControl.ContentTemplate>
<DataTemplate>
<TabItem Margin="0,25,0,0">
<TabItem.Header>
<StackPanel Width="auto" Height="auto">
<materialDesign:PackIcon Width="24" Height="24" HorizontalAlignment="Center"
Kind="{Binding Icon}" />
<TextBlock HorizontalAlignment="Center" Text="{Binding Title}" />
</StackPanel>
</TabItem.Header>
</TabItem>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</materialDesign:Card>
This is what it looks like now
If the data template is not used, he will show this
You should be using ItemTemplate instead of ContentTemplate
<TabControl.ItemTemplate>
<DataTemplate>
<TabItem Margin="0,25,0,0">
<TabItem.Header>
<StackPanel Width="auto" Height="auto">
<materialDesign:PackIcon Width="24" Height="24" HorizontalAlignment="Center"
Kind="{Binding Icon}" />
<TextBlock HorizontalAlignment="Center" Text="{Binding Title}" />
</StackPanel>
</TabItem.Header>
</TabItem>
</DataTemplate>
</TabControl.ItemTemplate>
I have a ListBox :
<ListBox Margin="10" Padding="10" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<!-- Data template -->
<Grid>
<Grid.ColumnDefinitions>
<!--Image-->
<ColumnDefinition Width="auto" />
<!--Info-->
<ColumnDefinition Width="500" />
<!--Options-->
<ColumnDefinition Width="*" /
</Grid.ColumnDefinitions>
<Image Height="50" Width="50" />
<StackPanel Grid.Column="1" HorizontalAlignment="Left">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Name: " />
<TextBlock Text="{Binding Name}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="ID: " />
<TextBlock Text="{Binding ID}" />
</StackPanel>
</StackPanel>
<Button Grid.Column="2" Content="{Binding Status}" Command="{Binding CompleteCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:MainPageViewModel}}}" CommandParameter="{Binding}" HorizontalAlignment="Right" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I need my CommandParameter be the ListItem of this ListBox.
Set the AncestorType to ListBox and include DataContext in the path:
<Button ... Command="{Binding DataContext.CompleteCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}}" CommandParameter="{Binding}" HorizontalAlignment="Right"></Button>
Then the Command binding should work provided that the CompleteCommand property belongs to the same class as the Items property
I've got this code:
<GroupBox Style="{DynamicResource MaterialDesignCardGroupBox}" Grid.Row="0" Grid.Column="0" >
<Label Content="{Binding MatchController.Match.TeamHome}" />
<GroupBox.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="32" Width="32" Source="{Binding MatchController.Match.TeamHomeShield}" />
<Label Content="{Binding MatchController.Match.TeamHome}" />
<TextBlock Margin="8,0,0,0" VerticalAlignment="Center" Style="{StaticResource MaterialDesignSubheadingTextBlock}" Text="{Binding Match.TeamHome}"/>
</StackPanel>
</DataTemplate>
</GroupBox.HeaderTemplate>
</GroupBox>
As you can see I've got a header template with a DataTemplate inside the GroupBox. The strange thing is the Label outside the GroupBox displays the value of TeamHome correctly however inside the StackPanel in the DataTemplate nothing is displayed and the binding is the same, why? Mystery of the life.
You need to bind your GroupBox to a datasource, then it will be available to the template.
<GroupBox Style="{DynamicResource MaterialDesignCardGroupBox}"
Grid.Row="0"
Grid.Column="0"
DataContext="{Binding MatchController}">
<Label Content="{Binding MatchController.Match.TeamHome}" />
<GroupBox.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="32"
Width="32"
Source="{Binding Match.TeamHomeShield}" />
<Label Content="{Binding Match.TeamHome}" />
<TextBlock Margin="8,0,0,0"
VerticalAlignment="Center"
Style="{StaticResource MaterialDesignSubheadingTextBlock}"
Text="{Binding Match.TeamHome}" />
</StackPanel>
</DataTemplate>
</GroupBox.HeaderTemplate>
</GroupBox>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="32" Width="32" Source="{Binding MatchController.Match.TeamHomeShield}" />
<Label Content="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}, Path=DataContext.MatchController.Match.TeamHome}" />
<TextBlock Margin="8,0,0,0" VerticalAlignment="Center" Style="{StaticResource MaterialDesignSubheadingTextBlock}" Text="{Binding Match.TeamHome}"/>
</StackPanel>
</DataTemplate>
</GroupBox.HeaderTemplate>
If the DataContext of your code is set on the Window element, use this code. Otherwise, just change to the type of the nearest element that has this DataContext.
I am developing an app on Windows 8.1 and using MVVM Light Framework.
So this is the partial XAML on one of my views.
Basically, I have a ViewModel_Queue which I contains a command that I need to call when a button is pressed inside the FlyoutMenu. My problem is, how will I be able to call this ViewModel_Queue where inside a binding ItemControl which is inside in another ItemControl which is then binded as well?
<ItemsControl Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" ItemsSource="{Binding Person.Child}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Border Background="#FF808080" Width="200">
<Grid>
<TextBlock Text="{Binding Name}" FontSize="15" Foreground="White" Margin="10" VerticalAlignment="Center" FontWeight="Bold" />
</Grid>
</Border>
<ItemsControl ItemsSource="{Binding Counters}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Width="120" Background="#0F000000">
<!-- get header color -->
<Border Height="20">
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding DataContext.Queue.Command_DoSomething, ElementName=mainGrid}" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Border>
<TextBlock Text="{Binding Total}" FontSize="15" Foreground="Black" Margin="10" TextAlignment="Center" x:Name="outcomeCounterCell" Tapped="outcomeCounterCell_Tapped">
<FlyoutBase.AttachedFlyout>
<Flyout Placement="Bottom" x:Name="MenuFlyout" FlyoutPresenterStyle="{StaticResource FlyoutPresenterRoundStyle}">
<Grid Width="200">
<StackPanel>
<Border Background="#7FFF0000" CornerRadius="8,8,0,0">
<TextBlock Text="Update" TextAlignment="Center" FontSize="15" Margin="0,10" Foreground="White" />
</Border>
<TextBlock Text="{Binding Total}" TextAlignment="Center" FontSize="30" Margin="0,20,0,0" Foreground="Black" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,20">
<Border BorderThickness="1" BorderBrush="#7F000000" CornerRadius="5,0,0,5" Width="50">
<TextBlock Text=" - " TextAlignment="Center" FontSize="20" FontWeight="Bold" Margin="0,5" />
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding Command_Decrement}" CommandParameter="{Binding }" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Border>
<Border BorderThickness="1" BorderBrush="#7F000000" CornerRadius="0,5,5,0" Width="50">
<TextBlock Text=" + " TextAlignment="Center" FontSize="20" FontWeight="Bold" Margin="0,5" />
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding Command_Increment}" CommandParameter="{Binding }" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Border>
</StackPanel>
</StackPanel>
</Grid>
</Flyout>
</FlyoutBase.AttachedFlyout>
</TextBlock>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I'm trying to get the index of a ListBoxItem in WP8.... And this is my XAML code
<phone:PivotItem Header="Pins">
<!-- Content Panel -->
<Grid x:Name="ContentPanel2" HorizontalAlignment="Left" Height="583" Margin="10,10,0,0" Grid.Row="1" VerticalAlignment="Top" Width="460">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400*"/>
<ColumnDefinition Width="0*"/>
<ColumnDefinition Width="87*"/>
</Grid.ColumnDefinitions>
<ListBox x:Name="lstData2"
ItemsSource="{Binding DataCollection2, Source={StaticResource PinsCollection}}" Grid.ColumnSpan="3" Foreground="#FF1D53D0" Height="583" VerticalAlignment="Bottom">
<ListBox.ItemTemplate >
<DataTemplate >
<StackPanel Orientation="Horizontal" Tap="StackPanel_Tap" MouseLeftButtonDown ="SetIndex" Tag="{Binding pinId}">
<Image Margin="8"
VerticalAlignment="Top"
Source="{Binding ImageUri}"
Width="100"
Height="100" />
<StackPanel Height="93" Width="259" >
<TextBlock Margin="8"
Width="250"
TextWrapping="Wrap"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Foreground="#FF1D53D0"
Text="{Binding Pinnedname}" Height="33" RenderTransformOrigin="0.5,0.5" FontFamily="Segoe WP SemiLight" FontSize="24" FontWeight="Bold" />
<TextBlock Width="155"
Margin="8,0,8,8"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Text="{Binding Status}" Foreground="#FF1D53D0" FontFamily="Segoe WP SemiLight" />
</StackPanel>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="Remove Pin" Click="RemovePin_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<!-- End of Content Panel -->
</Grid>
</phone:PivotItem>
I want to get the index in the SetIndex event handler in the MouseLeftButtonDown!
You should use a two-way binding for that:
<ListBox x:Name="lstData2" SelectedIndex="{Binding Index,Mode=TwoWay}"
There's generally no need to add click handlers for ListBox, as most basic click functionality is built into the control.