Conditional Hiding of WinRT/XAML Controls Using Style - Possible? - windows-phone-8.1

In my WinRT/Phone 8.1 app I have a form with a number of Grids (serving as wrappers) each containing two or more TextBlocks. I want to show only data that is available, meaning that if the content TextBlock of a particular Grid is empty I want to hide the entire Grid.
For instance:ยด
<Grid x:Name="NameSection">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
x:Name="NameLabel"
Text="Name:" />
<TextBlock Grid.Row="1"
x:Name="Name"
Text="{Binding Name}" />
</Grid>
If the Name TextBlock is empty, the entire Grid's visibility should be collapsed.
Adding logic for this either to code behind or (worse) the ViewModel could get messy for this long form, so I wonder if I can achieve this using XAML and styles. How can it be done in WinRT? Can I style the Grid such that it's visibility is based on the content in one of its subviews?

Converter
public class NullToVisibilityConverter: IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
return value == null ? Visibility.Collapsed: Visibility.Visible;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
then use it like this
<Grid x:Name="NameSection" Visibility={Binding Name, Converter={StaticResource MyNullConverter}}>
edit:
you can add string.IsNullOrEmpty(value as string) insted of value == null, if you want to check empty strings as well

Related

Search of user's contacts: highlight part of the name that matches with the search, when using Data Binding and LongListSelector (WP8)

I'm binding the user's contact list to a LongListSelector, as I saw in a Sample, this way:
<phone:PhoneApplicationPage.Resources>
...
<DataTemplate x:Key="AddrBookItemTemplate" >
<ListBoxItem>
<StackPanel>
<TextBlock Text="{Binding Path=DisplayName, Mode=OneWay}" FontFamily="Segoe WP" FontSize="25" />
<TextBlock Text="{Binding Path=PhoneNumbers[0].PhoneNumber, Mode=OneWay}" FontFamily="Segoe WP Light" FontSize="20" />
</StackPanel>
</ListBoxItem>
</DataTemplate>
...
</phone:PhoneApplicationPage.Resources>
...
<Grid x:Name="ContentPanel">
<phone:LongListSelector
x:Name="AddrBook"
JumpListStyle="{StaticResource AddrBookJumpListStyle}"
GroupHeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
ItemTemplate="{StaticResource AddrBookItemTemplate}"
LayoutMode="List"
IsGroupingEnabled="true"
HideEmptyGroups ="true"
SelectionChanged="AddrBook_SelectionChanged"/>
</Grid>
And I'm doing the user's search for a specific name this way (using LINQ):
contactsList = contactsEnum.Where(m => m.PhoneNumbers.Count() > 0 && (m.DisplayName.Split(' ').ToList().Any(p => p.ToLower().StartsWith(tbxSearch.Text.ToLower())) || (m.PhoneNumbers.Any(y => y.PhoneNumber.StartsWith(tbxSearch.Text))))).ToList();
AddrBook.ItemsSource = contactsList; // With IsGroupingEnabled=false
I'm looking for a way to highlight the part of the name that matches with the search, but I can't do this, with the way I made the data binding...
Does anyone know how I could do the highlight?
You could do something like this, whenever the word you type in within the textbox matches with the word which could be within the sub strings or the Collection, you could simply highlight it!
string[] substrings = regex.Split(Content.Text);
Content.Inlines.Clear();
foreach (var item in substrings)
{
//if a word from the content matches the search-term
if (regex.Match(item).Success)
{
//create a 'Run' and add it to the TextBlock
Run run = new Run(item);
run.Foreground = Brushes.Red;
Content.Inlines.Add(run);
}
else //if no match, just add the text again
Content.Inlines.Add(item);
}
References: Is there a way I can highlight specific text in a textbox?
How to Highlight the result from context sensitive search in windows phone 7?

Replace element inside a DataTemplate

I have a LongListSelector with a ItemTemplate like this:
<LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel>
Here I have a lot of elements that are always the same.
.
.
.
and one that varies
</StackPanel>
</DataTemplate>
</LongListSelector.ItemTemplate>
I know how to use this TemplateSelector class to change all the content inside the ItemTemplate depending o the item type.
My question is, how can use the template selector to change only the one item that varies so I dont need to repeat the whole lot of other elements.
I have tried using a ContentControl and ContentPresenter inside de StackPanel with no success
You're going to want to create a data trigger in your XAML to check whether each item is the one you're looking for.
This SO question is relevant enough to get you on the right track. It'll end up looking something like this:
<Style TargetType="TabItem">
<Style.Triggers>
<!-- Styling for elements that are NOT the last item -->
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Converter={StaticResource LastItemConverter}}" Value="False">
<Setter Property="Template">
<Setter.Value>
.
.
.
</Setter.Value>
</Setter>
</DataTrigger>
<!-- Styling for elements that are the last item -->
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Converter={StaticResource LastItemConverter}}" Value="True">
<Setter Property="Template">
<Setter.Value>
.
.
.
</Setter.Value>
</Setter>
</DataTrigger>
The Converter looks something like this - depending on what UI element you're binding.
public class IsLastItemInContainerConverter : IValueConverter
{
public object Convert(object value, Type targetType,
object parameter, CultureInfo culture)
{
DependencyObject item = (DependencyObject)value;
TabControl tc = (TabControl)TabControl.ItemsControlFromItemContainer(item);
// Return true for the first and last element
// (so they are similarly styled compared to other elements).
if (tc.ItemContainerGenerator.IndexFromContainer(item) == tc.Items.Count - 1) {
return true;
}
else if (tc.ItemContainerGenerator.IndexFromContainer(item) == 0)
{
return true;
}
else
{
return false;
}
}
Hope that helps.

FindAncestor implementation in WP8 ListBox

I want to implement a Listbox binding directly and here is the code i used in WPF syntax
<ListBox Name="lboxData" ItemsSource="{Binding}">
<ListBox.ItemTemplate >
<DataTemplate>
<StackPanel>
<ToggleButton x:Name="toggleChild" Style="{StaticResource ChapterHeadingStyle}"
IsChecked="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}}" // This is what i have to change . I want to set it based on the status of the ListBoxItem & Given code is the one i used in WPF app
/>
<ListBox Visibility="{Binding IsChecked, ElementName=toggleChild, Converter={StaticResource boolToVis}}" ItemsSource="{Binding pages}" Margin="10,0,0,0" >
<ListBox.ItemTemplate >
<DataTemplate>
//here is displaying child items one by one ..
</DataTemplate>
</ListBox.ItemTemplate >
</ListBox>
</ListBox.ItemTemplate >
</DataTemplate>
</StackPanel>
</ListBox>
The problem is that in WP8 RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem} is not supported . So how can i achieve the same thing in WP8. I want to set the toggle button as Checked if the container ListboxItem is selected , else i want to set the IsChecked as False.
I'll start by writing a comparer class
public class ElementComparer : FrameworkElement
{
public object Element1
{
get { return (object)GetValue(Element1Property); }
set { SetValue(Element1Property, value); }
}
// Using a DependencyProperty as the backing store for Element1. This enables animation, styling, binding, etc...
public static readonly DependencyProperty Element1Property =
DependencyProperty.Register("Element1", typeof(object), typeof(ElementComparer), new PropertyMetadata(null, UpdateResult));
public object Element2
{
get { return (object)GetValue(Element2Property); }
set { SetValue(Element2Property, value); }
}
// Using a DependencyProperty as the backing store for Element2. This enables animation, styling, binding, etc...
public static readonly DependencyProperty Element2Property =
DependencyProperty.Register("Element2", typeof(object), typeof(ElementComparer), new PropertyMetadata(null, UpdateResult));
public bool Result
{
get { return (bool)GetValue(ResultProperty); }
set { SetValue(ResultProperty, value); }
}
// Using a DependencyProperty as the backing store for Result. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ResultProperty =
DependencyProperty.Register("Result", typeof(bool), typeof(ElementComparer), new PropertyMetadata(false, OnResultChanged)); //added changed handler
private static void OnResultChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
ElementComparer ec = d as ElementComparer;
//if true then set the element 2 to element 1 of the comparer otherwise null
ec.Element2 = ((bool)e.NewValue) ? ec.Element1 : null;
}
private static void UpdateResult(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
ElementComparer ec = d as ElementComparer;
ec.Result = object.ReferenceEquals(ec.Element1, ec.Element2);
}
}
then I'll bind IsChecked from togglebutton to the Result of ElementComparer and will bind the Element1 and Element2 of the comaprer with the current item and the SelectedItem of lboxData (ListBox)
<ListBox Name="lboxData" ItemsSource="{Binding}">
<ListBox.ItemTemplate >
<DataTemplate>
<StackPanel>
<!--added Mode=TwoWay to binding of Element2-->
<local:ElementComparer x:Name="ElementComparer"
Element1="{Binding}"
Element2="{Binding SelectedItem, ElementName=bookTOCBox, Mode=TwoWay}" />
<!--removed Mode=OneWay from binding of IsChecked and added Mode=TwoWay-->
<ToggleButton x:Name="toggleChild" Content="{Binding name}"
Style="{StaticResource ChapterHeadingStyle}"
IsChecked="{Binding Result, ElementName=ElementComparer, Mode=TwoWay}"/>
...
</StackPanel>
the trick is to compare the selected item of the list to the current item to detect if it is selected as long as the name of parent listbox is "lboxData", this will work in WP8 too
Update summary
Removed one way binding from IsChecked property of toggle to Result of ElementComparer
Added two way binding to SelectedItem to Element2 of ElementComparer
added property changed handler for the Result property in ElementComparer
when the result is changes and is true (toggle is checked) push the value of Element1 to Element2
since the Element2 is bound to SelectedItem it force other items's result to false hence turn off the toggle and collapse the child list
added Mode=TwoWay to IsChecked property of toggle as seems quit unpredictable without it
Extras
additionally if you don't want to see ugly looking blue selection in list items then you may add the following to your resources too
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Background="Transparent">
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

SemanticZoom - How do I keep two ListView controls in selection synch?

Using a SemanticZoom control in an MVVM project, I have two ListView controls with custom styles and panels, etc. so they display horizontally, there is no grouping or need for it.
I bind both to a CollectionViewSource in the view model.
When I click an item in the zoomed-out view, it doesn't take focus to that item in the zoomed-in view.
How can I achieve this?
Edit
Added XAML code:
<SemanticZoom>
<SemanticZoom.ZoomedInView>
<ListView
Style="{StaticResource HorizontalListViewStyle}"
SelectionMode="None"
ScrollViewer.IsHorizontalScrollChainingEnabled="False"
ItemsSource="{Binding BoardItems}"
ItemContainerStyle="{StaticResource ZoomedOutListViewItemContainerStyle}">
</ListView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<ListView x:Name="listView"
Style="{StaticResource HorizontalListViewStyle}"
SelectionMode="None"
ScrollViewer.IsHorizontalScrollChainingEnabled="False"
ItemsSource="{Binding BoardItems}"
ItemContainerStyle="{StaticResource ZoomedOutListViewItemContainerStyle}">
</ListView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
Both of your ZoomedInView and ZoomedOutView need to have ScrollViewer.IsHorizontalScrollChainingEnabled="False" in order to scroll properly.
In codebehind for the page (or using an attached property), handle the ViewChangeStarted event with this code:
private void zoomyThingWoo_ViewChangeStarted(object sender, SemanticZoomViewChangedEventArgs e)
{
if (e.SourceItem.Item != null)
{
e.DestinationItem.Item = e.SourceItem.Item;
}
}
That's it. The documentation makes it sound like SemanticZoom will just work with any two controls that implement ISemanticZoomInfo but it doesn't.
I raised a documentation bug with the XAML team in Redmond.

How do I change the background color of a textblock in MVVM-WPF

I am new to WPF technology. i am using MVVM architecture.
I want to change the background of textblock based on viewmodel's attribute.
e.g If i am using 'brush' object, I want to bind it to background color of textblock.
<TextBlock Margin="0,1"
HorizontalAlignment="Center"
FontFamily="Arial"
FontSize="16"
Text="{Binding Line}"
TextWrapping="Wrap"
Background="{Binding brushobj}"/>
How to implement it?
You could define it like this, inside your ViewModel.
private Brush _brushobj;
/// <summary>
/// Gets or sets the BrushObject.
/// </summary>
public Brush BrushObj
{
get
{
return _brushobj;
}
set
{
// Set value
_brushobj = value;
// Notify UI that the value has changed.
RaisePropertyChanged("BrushObj");
// OnPropertyChanged("BrushObj"); // Use the appropriate function to notify the UI.
}
}
Then simply set the value with something like this:
BrushObj = (Brush)new BrushConverter().ConvertFromString("Green");
Last you bind it to your View like you did in your question:
Background="{Binding BrushObj}"
Edit: I tried to make a project myself just to verify that this was indeed working and the following code worked fine. If it's still not working it's more likely to be something with your MVVM setup causing problem.
MainWindowViewModel:
namespace WpfApplication1
{
public class MainWindowViewModel : ObservableObject
{
private Brush _brushobj = (Brush)new BrushConverter().ConvertFromString("Red");
public Brush BrushObj
{
get
{
return _brushobj;
}
set
{
_brushobj = value; // Set value
RaisePropertyChanged("BrushObj"); // Notify UI that the value has changed.
}
}
}
}
MainWindow:
<Window x:Class="WpfApplication1.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">
<Grid>
<TextBlock Margin="0,1"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontFamily="Arial"
FontSize="16"
Text="Testing a lot of stuff here! important stuff!"
TextWrapping="Wrap"
Background="{Binding BrushObj}"/>
</Grid>
</Window>