I have a LongListSelector with some textblocksand images inside.
How can I set the Image's visibility programmatically?
I have them set to collapsed and I want to enable them on selection_changed event of the LongListSelector.
XAML:
<phone:LongListSelector Name="LongListSel" Margin="0,-38,-22,2" ItemsSource="{Binding Items}" SelectionChanged="LongListSelector_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="110" Width="432">
<StackPanel Width="311" Margin="0,0,0,0">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" />
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}" />
</StackPanel>
<StackPanel Name="playImage" Height="50" Width="50" Margin="0,0,10,0">
<Image Source="Assets/Tiles/Iconsmind-Outline-Play-Music.ico" Visibility="{Binding ImageVis}" Width="50" Height="50" HorizontalAlignment="Left" Tap="Image_Tap_1"/>
</StackPanel>
<StackPanel Name="downloadImage" Height="50" Width="50" Margin="0,0,0,0">
<Image Source="Assets/Tiles/Download.ico" Visibility="{Binding ImageVis}" Width="50" Height="50" HorizontalAlignment="Left" Tap="Image_Tap_1"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
selection changed event:
private void LongListSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ItemViewModel item = new ItemViewModel();
item.ImageVis = Visibility.Visible;
//it can't be called the way you are doing it of course and it still doesn't work
}
ViewModel
private Visibility _imageVis;
public Visibility ImageVis
{
get { return _imageVis; }
set
{
_imageVis = value;
NotifyPropertyChanged("ImageVis");
}
}
Create a property of type Visibility an bind it to your image visibility.
ViewModel:
private Visibility _DownloadImage;
public Visibility DownloadImage
{
get { return _DownloadImage; }
set
{
if (_DownloadImage != value)
{
_DownloadImage = DownloadImage;
OnPropertyChanged("DownloadImage");
}
}
}
xaml
<Image Source="Assets/Tiles/Download.ico" Visibility="{Binding DownloadImage}" ... />
xaml.cs (I would prefer to bind the command also to the ViewModel, to keep the MVVM pattern)
private void LongListSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
DownloadImage = Visibility.Visible;
}
Related
I want to change the background of StackPanel when clicking TextBlock.
enter image description here
now background is bule! I want to change it!
<TreeView Name="tvView" HorizontalAlignment="Left" VerticalAlignment="Top" BorderThickness="0">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Path=ChildNodes}">
<Grid VerticalAlignment="Top" Margin="0">
<StackPanel Orientation="Horizontal" d:LayoutOverrides="Height">
<TextBlock Name="ConfidenceLevelReminderText" Text="！" FontWeight="Bold" HorizontalAlignment="Center" Foreground="#FF0000" Width="{Binding Path=ConfidenceLevelWidth}" Margin="0,0,0,0"></TextBlock>
<TextBlock TextWrapping="Wrap"
Padding="0,3,0,3"
Text="{Binding Path=Name}"
ToolTip="{Binding Path=NameToolTip}"
Tag="{Binding Path=TagInfo}"
MouseLeftButtonDown="name_MouseLeftButtonDown"
FontSize="14"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Foreground="#FF666666"
Margin="0"
Width="{Binding Path=TextWidth}"
Cursor="Hand"/>
<Button x:Name="btnIngnore" Width="{Binding Path=IgnoreWidth}" Click="btn_ignore_Click" Tag="{Binding Path=NodeId}" Margin="0" BorderThickness="0" Background="{x:Null}" Style="{StaticResource ButtonStyle32}" IsEnabled="{Binding Path=IgnoreWidth,Converter={StaticResource itb}}" Cursor="Hand">
<TextBlock Text="xxxx" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0" FontSize="12" Foreground="#FF666666"/>
</Button>
</StackPanel>
</Grid>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
If you want
to change the background of StackPanel when clicking TextBlock.
You can add EventSetter to the TextBlock's Style and handle event in the event handler.
<TextBlock Text="...">
<TextBlock.Style>
<Style TargetType="TextBlock">
<EventSetter Event="MouseDown" Handler="Mouse_LBtnDown"/>
</Style>
</TextBlock.Style>
</TextBlock>
private void Mouse_LBtnDown(object sender, MouseButtonEventArgs e)
{
StackPanel stp = null;
var visParent = VisualTreeHelper.GetParent(sender as FrameworkElement);
while (stp == null && visParent != null)
{
stp = visParent as StackPanel;
visParent = VisualTreeHelper.GetParent(visParent);
}
if (stp == null) { return; }
stp.Background = Brushes.Coral;
}
For make it reusable and adjustable you could make a behavior from the event handler.
If you don't want what you have asked, then rethink your question and ask new one.
I'm working on Windows Phone 8.1 RT project and i want to get my binding item when mapcontrolSP tapped.
<Maps:MapControl x:Name="Map" MapServiceToken="abcdef-abcdefghijklmno">
<Maps:MapItemsControl x:Name="mapitem" ItemsSource="{Binding}">
<Maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="mapcontrolSP" Orientation="Horizontal" Background="Red" Tapped="ItemStckPanel">
<Image Source="Assets/ico-venue.png" Height="45" Width="45"
Maps:MapControl.Location="{Binding Geopoint}"
Maps:MapControl.NormalizedAnchorPoint="{Binding Anchor}"/>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Margin="5">
<TextBlock FontSize="15" Foreground="White" Text="{Binding name}"/>
<TextBlock FontSize="15" Foreground="White" Text="{Binding address}"/>
<TextBlock FontSize="15" Foreground="White" Text="{Binding distance}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</Maps:MapItemsControl.ItemTemplate>
</Maps:MapItemsControl>
</Maps:MapControl>
I create a tapped event on the StackPanel element but item is null:
private void ItemStckPanel(object sender, TappedRoutedEventArgs e)
{
var item = sender as FsqBasicItem;
MessageDialog dialog = new MessageDialog(item.name);
dialog.ShowAsync();
}
How can i get item ?
Fast solution:
private void ItemStckPanel(object sender, TappedRoutedEventArgs e)
{
var stackPanel = sender as StackPanel;
var item = stackPanel.DataContext as FsqBasicItem;
if(item != null)
{
MessageDialog dialog = new MessageDialog(item.name);
dialog.ShowAsync();
}
}
i want to implement a list of item that when user taps on a item it acts like a combo box and show details of selected item
here is image of what i want. is it possible to implement this with listbox?
XAML
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
<StackPanel>
<StackPanel >
<Grid x:Name="itemgrid" Height="100" Background="Gray" Tap="itemgrid_Tap">
<TextBlock x:Name="itemtext" Text="˄" HorizontalAlignment="Left" Margin="50,0" FontSize="45" FontWeight="Bold" VerticalAlignment="Center"/>
<TextBlock Text="Item" HorizontalAlignment="Right" Margin="100,0" FontSize="35" VerticalAlignment="Center"/>
</Grid>
<ListBox Background="Green" x:Name="list" Visibility="Collapsed">
<ListBoxItem>
<TextBlock Text="Item1"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Text="Item2"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Text="Item3"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Text="Item4"/>
</ListBoxItem>
</ListBox>
</StackPanel>
<StackPanel>
<!--add same other-->
</StackPanel>
<StackPanel>
<!--add same other-->
</StackPanel>
</StackPanel>
</Grid>
C# :
bool isfirstitem = true;
public MainPage()
{
InitializeComponent();
}
private void itemgrid_Tap(object sender, GestureEventArgs e)
{
if (isfirstitem)
{
itemtext.Text = "˅";
list.Visibility = Visibility.Visible;
}
else
{
itemtext.Text = "˄";
list.Visibility = Visibility.Collapsed;
}
isfirstitem=!isfirstitem;
}
I have longListSelector:
<DataTemplate x:Key="AddrBookItemTemplate" >
<StackPanel VerticalAlignment="Top">
<Grid Background="#3FCDCDCD" Margin="3,3,3,3">
<Image Source ="{Binding UrlImage}" Height="100" Width="100" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,0" Stretch="Fill"/>
<TextBlock Text="{Binding Title}" TextWrapping="Wrap" Margin="110,0,0,0" Foreground="Black" FontFamily="Portable User Interface"/>
</Grid>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<phone:LongListSelector
x:Name="AddrBook"
Background="Transparent"
ItemTemplate="{StaticResource AddrBookItemTemplate}"
IsGroupingEnabled="true"
HideEmptyGroups ="true"
SelectionChanged="AddrBook_SelectionChanged"
/>
Preview - name of my class
How can i get index of PressedItem?
What should i write here -
private void AddrBook_SelectionChanged(object sender, SelectionChangedEventArgs e)
{ }
you should write
var longlistselector = (sender as LongListSelector);
int index = longlistselector.DataSource.IndexOf(longlistselector.SelectedItem);
I have the following DataTemplate:
<DataTemplate x:Key="ToDoListBoxItemTemplate">
<Grid x:Name="item2Expanded" HorizontalAlignment="Left" VerticalAlignment="Top" Width="480" Background="{Binding Converter={StaticResource RowColour}}" MinHeight="81">
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Width="420" Margin="60,0,0,0">
<TextBox x:Name="taskTitle" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding ItemName}" VerticalAlignment="Top" Width="420" Background="{x:Null}" BorderBrush="{x:Null}" CaretBrush="#FF0080FF" SelectionBackground="#FFCFCFCF" Foreground="#FF4E4E4E" BorderThickness="3,3,3,6" FontSize="29.333" Style="{StaticResource listTextBoxTemplate}" InputScope="Text" SelectionForeground="#FF4E4E4E" KeyUp="taskTitle_KeyUp" LostFocus="taskTitle_LostFocus" Tap="taskTitle_Tap" IsReadOnly="True" Margin="0,1,0,0" DoubleTap="taskTitle_DoubleTap"/>
<TextBox x:Name="taskDetail" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Tea is an essential English beverage, it has a nice calming effect, and is often served alongside biscuits." VerticalAlignment="Top" Width="420" Background="{x:Null}" BorderBrush="{x:Null}" CaretBrush="#FF0080FF" SelectionBackground="#FFCFCFCF" Foreground="#FF878787" BorderThickness="3,0,3,6" FontSize="21.333" Style="{StaticResource listTextBoxTemplate}" InputScope="Text" SelectionForeground="#FF878787" Margin="0,-20,0,0" KeyUp="taskDetail_KeyUp" LostFocus="taskDetail_LostFocus" Padding="2,5,2,2" IsHitTestVisible="False"/>
<Grid Height="170" Margin="0,-20,0,0">
<Button x:Name="chooseDateButton" Content="27/06/2013" HorizontalAlignment="Left" Margin="6,13,0,0" VerticalAlignment="Top" BorderBrush="#FF959595" Foreground="#FF959595" Width="157" HorizontalContentAlignment="Left" FontSize="20" Style="{StaticResource selectorButtonTemplate}"/>
<Button x:Name="chooseTimeButton" Content="12:00" HorizontalAlignment="Left" Margin="146,13,0,0" VerticalAlignment="Top" BorderBrush="#FF959595" Foreground="#FF959595" Width="99" HorizontalContentAlignment="Left" FontSize="20" Style="{StaticResource selectorButtonTemplate}"/>
<Button x:Name="setOrClearButton" Content="REMIND ME" HorizontalAlignment="Left" Margin="228,13,0,0" VerticalAlignment="Top" BorderBrush="#FF959595" Foreground="White" Width="180" FontSize="20" Background="#FF959595" Style="{StaticResource greyButtonTemplate}"/>
<Button x:Name="deleteButton" Content="DELETE TASK" HorizontalAlignment="Left" Margin="6,85,0,0" VerticalAlignment="Top" BorderBrush="#FFEE4747" Foreground="White" Width="180" FontSize="20" Background="#FFEE4747" Style="{StaticResource redButtonTemplate}"/>
<Image x:Name="retractButton" Margin="347,107,21,11" Source="/Assets/retract.png" Stretch="Fill" Tap="retractButton_Tap"/>
</Grid>
</StackPanel>
<CheckBox x:Name="checkBox" IsChecked="{Binding IsComplete, Mode=TwoWay}" Content="" HorizontalAlignment="Left" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Width="72" BorderThickness="0" Template="{StaticResource checkBoxTemplate}" Checked="checkBox_Checked" Unchecked="checkBox_Unchecked"/>
</Grid>
</DataTemplate>
Where the Grid item2Expanded is placed dynamically in a ListBox (Name="allToDoItemsListBox"). Text is added to each item via bindings.
The image retractButton has Tap="retractButton_Tap", As shown in the code:
private void retractButton_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
if (isItemExpanded == true)
{
// Compacts current item
itemGrid.Height = taskTitle.ActualHeight; // Restores itemGrid height to fit only taskTitle
taskTitle.IsReadOnly = true; // taskTitle becomes only double-tap editable, single tap to expand once more
taskDetail.IsHitTestVisible = false; // Stops overlapping taps
isItemExpanded = false;
}
// Adds the event handler for single tap event
tapTimer.Tick += new EventHandler(tapTimer_Tick);
tapTimer.Start();
}
private void tapTimer_Tick(object sender, EventArgs e)
{
// Stop timer
tapTimer.Tick -= new EventHandler(tapTimer_Tick);
tapTimer.Stop();
// Rest of the single tap function
if (isItemExpanded == false)
{
taskDetail.IsHitTestVisible = true;
taskDetail.IsEnabled = false;
// Expands current item
itemGrid.Height = double.NaN; // Sets itemGrid height to auto
isItemExpanded = true;
// Yeah... don't ask.
// Stops temporary text highlighting/auto jumping to keyboard
taskTitle.IsEnabled = false;
taskTitle.IsEnabled = true;
taskDetail.IsEnabled = true;
}
}
But I cannot access itemGrid, taskTitle, or taskDetail for this specific item. And I have no idea how to pass them to the tapTimer_Tick function.
I have been able to use the Tag="{binding itemID}" on elements, but that still hasn't allowed me to solve this issue.
How do I find the grid item2Expanded that the Tap originated from, and then access elements in the same grid by name?
If I want to access the same element as was clicked, then it's easy:
private void taskTitle_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
TextBox taskTitle = (TextBox)sender;
taskTitle.IsEnabled = false;
}
I've been trying to work out how to use Visual Tree Helper to solve this problem, but I have no idea how to do it.