I am trying to implement something where I need to display list of people and a green icon if they are online. these people are grouped by some categories. I am using an expanderview toolkit control to display the list. So how do I set the icon image to be visible dynamically ? I have tried something like this which didnt work.
<DataTemplate x:Key="groupsItemTemplate">
<StackPanel Orientation="Horizontal" Margin="30,5,0,0"">
<Image Height="30" Width="30" Source="/Assets/Online.png" Margin="10,5,0,0" Visibility="{Binding IsFriendOnline}"></Image>
<TextBlock TextWrapping="NoWrap" FontFamily="Segoe WP Light" FontSize="24" Margin="8,0,0,0" VerticalAlignment="Center" HorizontalAlignment="left" Height="auto" Width="300" Text="{Binding FriendName}"></TextBlock>
</StackPanel>
</DataTemplate>
IsFriendOnline is an integer property.
Firstly, you need to use a converter in order to convert the value of your IsFriendOnline property to the Visibility enum that you require.
WPF has a "BooleanToVisibilityConverter" built in so if you have the ability to change the IsFriendOnline to a boolean value (which sounds like it makes a little more sense anyway) I would go down this route... if its imperative that the property is an integer then you will need to roll your own converter which isnt difficult.
The syntax would look something like this when you have a converter (my code below assumes IsFriendOnline is a boolean)...
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<DataTemplate x:Key="groupsItemTemplate">
<StackPanel Orientation="Horizontal" Margin="30,5,0,0"">
<Image Height="30" Width="30" Source="/Assets/Online.png" Margin="10,5,0,0" Visibility="{Binding IsFriendOnline, Converter={StaticResource BooleanToVisibilityConverter}}"></Image>
<TextBlock TextWrapping="NoWrap" FontFamily="Segoe WP Light" FontSize="24" Margin="8,0,0,0" VerticalAlignment="Center" HorizontalAlignment="left" Height="auto" Width="300" Text="{Binding FriendName}"></TextBlock>
</StackPanel>
</DataTemplate>
Hope this helps...
Related
To be honest I somehow have a hard time with MVVM.
To be more exact I have a hard time with creating/changing pages in MVVM.
This is my MainPage containing my SplitView:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<!--#region Splitview-->
<Grid.RowDefinitions >
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<RelativePanel >
<Button
FontFamily="Segoe MDL2 Assets"
Content=""
FontSize="30"/>
</RelativePanel>
<SplitView Grid.Row="1"
x:Name="SplitView"
DisplayMode="CompactOverlay"
IsPaneOpen="False"
CompactPaneLength="49"
OpenPaneLength="160"
PaneBackground="DarkGray"
>
<SplitView.Pane>
<StackPanel>
<ListBox SelectionMode="Single"
x:Name="lbHamburgerMenue"
Background="Gray"
HorizontalAlignment="Left">
<ListBoxItem Margin="0,5,0,2.5"
Background="DarkGray">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
FontSize="30"
VerticalAlignment="Center"/>
<TextBlock Margin="15,0,0,0"
Text="Home"
FontSize="20"
VerticalAlignment="Center"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Margin="0,2.5,0,2.5"
Background="DarkGray">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
FontSize="30"
VerticalAlignment="Center"/>
<TextBlock Margin="15,0,0,0"
Text="New Movie"
FontSize="20"
VerticalAlignment="Center"/>
</StackPanel>
</ListBoxItem>
</ListBox>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<!--#endregion-->
<!--#region content area-->
<Grid Grid.Row="1" Grid.Column="1" >
</Grid>
</SplitView.Content>
</SplitView>
</Grid>
For the Content I am kinda lost.
How do I get a View displayed when another ListBox.Item gets selected?
I know I need a Frame and inside that Frame the View has to be, but I would like some help in that regard because I am stuck here. (or with views in MVVM in general).
Yes, you are correct on your first assumption. You need to replace your GridView in the SplitView.Content section with a Frame. Then when you want to navigate to a particular view, you call Frame.Navigate.
For MVVM to keep your main page ViewModel from having intimate knowledge of your views, you can define a NavigationService that encapsulates page and view structure and the view types.
Here is a good article about the basics of MVVM and building a NavigationService: https://msdn.microsoft.com/en-us/magazine/jj651572.aspx (go to 'Setting up Navigation' section).
Another great description from StackOverflow: Navigating to a new page from the View Model in Windows Phone 8.1 universal app.
Due to "not understanding everything quite right" I ended up with a "bad" solution - works fine, but should be much less code/work.
This helped me very much understanding switching between Views! And I ended up using it.
Sadly I could not find a good tutorial to just change the <SplitView.Content> so I "Copy & Paste" it on every View.
i am trying to refix the hamburger menu with some FontAwesome Icons, my way to do this is a ResourseDictionoary in my app. Now i want to bind the keyFontAwesomeUserString for the glyph bellow . My property in the object is Icon with type string. In my list the Icon var of x:DataType="local:MenuItem" has the values from my resoursedictionary.
<FontIcon Grid.Column="0" FontFamily="{StaticResource FontAwesomeFontFamily}" Glyph="{StaticResource FontAwesomeUserString}" Foreground="White" />
<TextBlock Grid.Column="1" Text="{x:Bind Name, Mode=OneWay}" TextWrapping="Wrap" FontSize="16" VerticalAlignment="Center" Foreground="White"/>
Please tell me if/how i can bind the ResourceKey property of StaticResourse.
Thank you
You can change the values of a resource dictionary by replacing them through code like:
Application.Current.Resources["FontAwesomeUserString"] = "&glyphCode";
Do not forget that StaticResource are only read when the page is created.
Depending when you are updating your dictionary, it could be enough but if you want your application to properly update itself when you are changing something in the resource dictionary, you will have to use ThemeResource.
You can get more details about ThemeResource here.
<FontIcon Grid.Column="0"
FontFamily="{ThemeResource FontAwesomeFontFamily}"
Glyph="{ThemeResource FontAwesomeUserString}"
Foreground="White" />
Update
If you are just trying to set the glyph/font family for all your items, a regular binding is enough:
<DataTemplate x:Key="DefaultTemplate" x:DataType="local:MenuItem">
<Grid Width="240" Height="48">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<FontIcon Grid.Column="0" FontFamily="{x:Bind FontFamily}" Glyph="{x:Bind Icon}" Foreground="White" />
<TextBlock Grid.Column="1" Text="{x:Bind Name, Mode=OneWay}" TextWrapping="Wrap" FontSize="16" VerticalAlignment="Center" Foreground="White"/>
</Grid>
</DataTemplate>
You just have to define the FontFamily and the Icon in your view mod.
el
You can have a look at the hamburger menu from the UWP toolkit documentation
I'm new in XAML for Windows Phone 8.1 and have some troubles with
making a Stackpanel clickable
collapse Item, when clicked
My work so far looks like that:
And the Code to that (please correct me, if there are major flaws):
<Border CornerRadius="15" Background="#FF595656" Margin="0" Grid.ColumnSpan="2" Height="80">
<StackPanel Orientation="Horizontal">
<StackPanel Width="20" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel HorizontalAlignment="Left" Height="80" Margin="0,0,0,0" VerticalAlignment="Center" Width="51">
<Image HorizontalAlignment="Left" Height="51" Margin="0,15,0,0" Width="51" Source="Assets/fish.png" Stretch="Fill" RenderTransformOrigin="2.307,0.881" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Width="10" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel HorizontalAlignment="Left" Height="80" Margin="0" VerticalAlignment="Top" Width="310">
<TextBlock HorizontalAlignment="Left" Height="25" Margin="0,20,0,0" TextWrapping="Wrap" Text="Entry 1" Width="310" VerticalAlignment="Top" FontSize="18" Foreground="Black" FontWeight="Bold"/>
<TextBlock HorizontalAlignment="Left" Height="17" Margin="0" TextWrapping="Wrap" Text="Short description Entry 1" Width="310" VerticalAlignment="Top" Foreground="#FF0097FF"/>
</StackPanel>
</StackPanel>
</Border>
This code will later be wrapped inside a ListBox with Image, Entry 1 and the short description being bound:
<ListBox x:Name="ListBox1" Margin="0"
Width="400" Height="200" HorizontalAlignment="Left"
ItemsSource="{Binding}" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2" >
<ListBox.ItemTemplate>
<DataTemplate>
// the code above
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So my question is:
How can I make a nice looking expansion/collapse of each Item in the ListBox, whenever I click on it?
Thank you very much in advance.
The real question is here is what do you want it to collapse to? There are too many possible ways to collapse some visual data item. Do you just want to change the height of the item or do you want some fancy animation that collapse some property?
If the height is what you're looking for it's pretty easy. Just attach an Tap Event on that Border of yours. On a sidenote, you probably want to edit the ItemContainerStyle to have <Setter Property="HorizontalContentAlignment" Value="Stretch"/> so the Listbox will stretch across the screen, otherwise imho it's un-useable.
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Red" BorderThickness="0,1" Tap="Border_Tap">
<StackPanel>
<!--- rest of template --->
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
Then calculate the Minimum height you want to show (make sure it's actually useable, meaning... I can Tap on it again to show the whole thing without using a Mag Glass).
private void Border_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
int minHeight = 40; // change to whatever you want
Border b = sender as Border;
if (b.ActualHeight > minHeight)
{
b.Height = minHeight;
}
else
{
b.Height = double.NaN; // this will change the height back to Auto, showing everything
}
}
Code In Action
This is just a quick solution to your question. Some people on here would rather have you create a StoryBoard Animation on the Height Property of the Selected state in the VisualStateManager. If you reword or create a new question explicitly stating you want a VisualStateManager solution, I will provide you one as well. Good luck.
I want to make checkbox and textbloxk parallel or inline in my XAML WP8, but it seems the checkbox is upside and the textblock is below the checkbox. Any suggest how?
<Grid Margin="0,522,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
<StackPanel HorizontalAlignment="Center">
<CheckBox x:Name="Accept"/>
<TextBlock Text="I Accept Terms and Conditions" VerticalAlignment="Top"/>
</StackPanel>
</Grid>
You don't need TextBlock for this. Set CheckBox.Content:
<CheckBox x:Name="Accept" Content="I Accept Terms and Conditions"/>
and for other cases if want to stack elements horizontally then set Orientation="Horizontal" on you StackPanel
<StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
Is it possible to use a converter/style selector without having to use databinding?
I want the style of my object to change if a certain value is reached.
Here is what i have
<Border Name="watch0_0Border" Grid.Row="0" Grid.Column="0" Style="{StaticResource clockBorderStyle}">
<StackPanel Style="{StaticResource clockStackPanelStyle}">
<TextBlock Name="watch0_0Time" Style="{StaticResource clockTimerStyle}">07:45:23</TextBlock>
<TextBlock Name="watch0_0Description" Style="{StaticResource clockTextStyle}" Text="{Binding ElementName=watch0_0WorkDescription, Path=Text}"></TextBlock>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Name="watch0_0Pause" Margin="5" Click="watch0_0Pause_Click">Pause</Button>
<Button Name="watch0_0SetNewTime" Margin="5" Click="watch0_0SetNewTime_Click">Set new time</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBox Name="watch0_0Hours" Margin="5">0</TextBox>
<TextBox Name="watch0_0Minutes" Margin="5">0</TextBox>
<TextBox Name="watch0_0Seconds" Margin="5">0</TextBox>
</StackPanel>
<TextBox Name="watch0_0WorkDescription" TextAlignment="Center" Margin="5">Work description</TextBox>
</StackPanel>
</Border>
I want to canhe the background of the border when the times goes under 0.
If your timer has access to main window (which can access watch0_0Border) or watch0_0Border direct (by passing these in when timer was created) then you should just be able to use the UI dispatcher to set watch0_0Border.BorderBrush (or whatever property) when timer hits zero.