I have a view model that inherits from ReactiveObject from reactiveui.net, something like
public sealed class TestViewModel : ReactiveObject
{
public sealed class NestedViewModel
{
private string _property;
public string VMProperty
{
get { return _property; }
set { this.RaiseAndSetIfChanged(ref _property, value); }
}
private string _suffix;
public string Suffic
{
get { return _suffix; }
set { this.RaiseAndSetIfChanged(ref _suffix, value); }
}
}
private NestedViewModel _nested = new NestedViewModel();
public Nested
{
get { return _nested; }¨
set { this.RaiseAndSetIfChanged(ref _nested, value); }
}
#if DEBUG
public TestViewModel() {
Nested.VMProperty = "Test string";
Nested.Suffix = "with suffix";
}
#endif
}
I can get the following to display both design-time and run-time:
<Page.DataContext>
<local:TestViewModel />
</Page.DataContext>
<TextBlock Text="{Binding Nested.VMProperty}" />
<TextBlock Text="{Binding Nested.Suffix}" />
but when I try to do this instead, no text is displayed design-time:
<Page.DataContext><!-- ... -->
<TextBlock>
<Run Text="{Binding Nested.VMProperty}" />
<Run Text="{Binding Nested.Suffix}" />
</TextBlock>
Run-time it still works, but I don't want to have to deploy to the device emulator every time I want to check some pixel pushing...
How do I get these properties do display inside a <Run /> tag during design time?
Paul Betts, the creator of the ReactiveUI framework, advocates hard-coding sample data into the Page's XAML:
<TextBlock>
<Run Text="Test String" x:Name="VMproperty" />
<Run Text="with suffix" x:Name="Suffix" />
</TextBlock>
You can then do the binding in the Page's code behind:
this.OneWayBind(ViewModel, vm => vm.VMproperty, v => v.VMproperty.Text);
this.OneWayBind(ViewModel, vm => vm.Suffix, v => v.Suffix.Text);
These ReactiveUI style bindings overwrite the sample data that was hard coded in the XAML. So you get sample data at design-time and data binding at runtime.
Source: https://groups.google.com/d/msg/reactivexaml/GrVHWm8tUuM/4EAxOsxc_LQJ
What about using FallbackValue in your binding? I use it frequently to check how bound content would look like and didn't have any problem.
Related
I have a SearchResult class that binds to a ListView. What I want to do specifically is highlight the snippet inside the search result text that matches the query the user entered.
The relevant XAML looks something like this (omitting the fluff):
<DataTemplate>
<StackPanel>
<!-- Search result -->
<RichTextBlock>
<!-- Would this idea work? -->
<RichTextBlock.TextHighlighters>
<TextHighlighter>
<TextHighlighter.Ranges>
<!-- Add the bound range here-->
<!-- {Binding Range} or text highlighter or something -->
</TextHighlighter.Ranges>
</TextHighlighter>
</RichTextBlock.TextHighlighters>
<Paragraph>
<Run Text="{Binding Text}"></Run>
</Paragraph>
</RichTextBlock>
</StackPanel>
</DataTemplate>
I can add whatever property from the SearchResult class, be it a TextHighlighter or a TextRange. I just don't know whether the XAML syntax allows plugging in that value.
I've also thought of doing this in code, but I do want to keep the search item template inside the XAML, and not put it in C#. However, it would be possible to do something like lvSearchResults.Items[i]... or whatever it takes to put in the highlighter or range. I just can't figure out the correct method at the moment.
If you are planning to create a locally highlighted search result list, you can try this way:
Create a search result class
public class SearchResult
{
public string DisplayText { get; set; }
public string HighlightText { get; set; }
}
Create a UserControl to show the result
SearchResultBlock.xaml
<Grid>
<TextBlock x:Name="ResultBlock" TextWrapping="Wrap" MaxLines="2"
TextTrimming="CharacterEllipsis"/>
</Grid>
SearchResultBlock.xaml.cs
public sealed partial class SearchResultBlock : UserControl
{
public SearchResultBlock()
{
this.InitializeComponent();
}
public SearchResult Result
{
get { return (SearchResult)GetValue(ResultProperty); }
set { SetValue(ResultProperty, value); }
}
public static readonly DependencyProperty ResultProperty =
DependencyProperty.Register("Result", typeof(SearchResult), typeof(SearchResultBlock), new PropertyMetadata(null,new PropertyChangedCallback(Result_Changed
private static void Result_Changed(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if(e.NewValue!=null && e.NewValue is SearchResult data)
{
var instance = d as SearchResultBlock;
instance.ResultBlock.Inlines.Clear();
var sp = data.DisplayText.Split(data.HighlightText);
instance.ResultBlock.Inlines.Add(new Run { Text = sp.First() });
instance.ResultBlock.Inlines.Add(new Run { Text = data.HighlightText, Foreground = new SolidColorBrush(Colors.Red) });
if (sp.Length > 1)
instance.ResultBlock.Inlines.Add(new Run { Text = sp.Last() });
}
}
}
Use it in DataTemplate
<DataTemplate x:DataType="SearchResult" x:Key="ResultItemTemplate">
<SearchResultBlock Result="{Binding}"/>
</DataTemplate>
By string splitting, create different types of Runs and merge them in the TextBlock. This can also achieve the highlighting effect.
Best regards.
I want to show a label when i click on my item in my listview.
The real problem i don't know how to link between my viewmodel and my views
I want modify my label in viewmodel but I don't know if its possible currently.
My xaml :
<StackLayout>
<Label x:Name="labelperso"
Text="{Binding newProduct}"
IsVisible="{Binding Addproduct}"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
BackgroundColor="#000000"
FontSize="20"
Opacity="0"/>
<ListView ItemsSource="{Binding Products}" CachingStrategy="RecycleElement" RowHeight="50" >
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding CodeReferenceLibelle}" TextColor="Black"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Behaviors>
<b:EventToCommandBehavior EventName="ItemSelected" Command="{Binding
SelectCommand}" Converter="{StaticResource SelectedItemConverter}"/>
</ListView.Behaviors>
my viewmodel :
#region labelperso property
private string _newProduct;
public string newProduct
{
get { return _newProduct; }
set { SetProperty(ref _newProduct, value); }
}
#endregion
#region Addproduct property
private bool _Addproduct;
public bool Addproduct
{
get { return _Addproduct; }
set { SetProperty(ref _Addproduct, value); }
}
#endregion
when I click on my item :
async Task Select()
{
newProduct = "Produit ajouté !";
basketManager.AddProductSkuAsync(sku);
newProduct = "";
await Task.Run(() => ShowText());
}
//I have tried this but I can't use my label in my view
async Task ShowText()
{
await labelperso.FadeTo(1);
await Task.Delay(1000);
await labelperso.FadeTo(0);
}
Why are you want to take the label "labelperso" in VM ? you can use it in xaml.cs instead.
You just need to add the event ItemSelected like this:
<ListView ItemsSource="{Binding Products}" ItemSelected="OnSelection">
In xaml.cs
void OnSelection(object sender, SelectedItemChangedEventArgs e)
{
if (e.SelectedItem == null)
{
return;
}
//suppose the binding Object is Product
Product product = (Product)e.SelectedItem;
//labelperso.Text = "name = " + product.Name;
labelperso.FadeTo(1);
Task.Delay(1000);
labelperso.FadeTo(0);
}
Normally, VM are unrelated to Xaml, and we should not get labels from VM.
And we don't recommend it.But if you must, you can pass the Label in from the xaml.cs file like this:
You can define a variable in yourpage.xaml.cs:
public Label pageLabel;
and initial like this:
pageLabel = labelperso;
BindingContext = new YourViewmodel(this);
And in YourViewmodel.cs:
public Label ss;
public YourViewmodel(ContentPage parentPage)
{// here HomePage is your contentPage name of the page`
ss = ((HomePage)parentPage).pageLabel;//after this you can use it
}
You need to add a SelectedProduct property to your VM.
private string _SelectedProduct;
public string SelectedProduct
{
get { return _SelectedProduct; }
set { SetProperty(ref _SelectedProduct, value); }
}
You can then bind your ListView's SelectedItem to it
<ListView ItemsSource="{Binding Products}"
SelectedItem="{Binding SelectedProduct}"
CachingStrategy="RecycleElement"
RowHeight="50" >
You can then control the visibility of your label by binding to SelectedProduct via a "nullToVisibility" converter, or by using triggers etc.
You should try to use MVVM pattern rather than hacking with code behind.
Using MVVM you can add a Visible property to your viewmodel and bind the IsVisible property of the label to it.
Code will be much easy to read and maintain.
Hello I want to create notify icon to my task-bar and when I click that icon one popup window open and that popup showing me which tasks are I have to complete today and also want to show today's appointment list.
Doubts
Suppose I get 10 task from database for today's date then All task should be display with scroll bar.
How to bind data with WPF control([textBlock])?
How to create [textBlock] control dynamically means Suppose I get task description from description column then it display otherwise description [textBlock] is not create.
I have refereed following link to achieve this.
http://www.codeproject.com/Articles/36468/WPF-NotifyIcon
but I really don't know how to bind data with WPF application.
Edit the FancyPopup.xaml
Add:
<ListView ItemsSource="{Binding TasksCollection, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding TaskName}"/>
</DataTemplate>
<ListView.ItemTemplate/>
</ListView>
In the code behind you can set your view model like this:
public FancyPopup()
{
InitializeComponent();
this.DataContext = new PopupViewModel();
}
And then in your ViewModel:
public ObservableCollection<TaskDataModel> tasksCollection;
public ObservableCollection<TaskDataModel> TasksCollection
{
get
{
if (tasksCollection == null)
{
tasksCollection = new ObservableCollection<TaskDataModel>();
}
return tasksCollection;
}
set
{
tasksCollection = value;
this.OnPropertyChanged("tasksCollection");
}
}
Where TaskDataModel is class describing your data model.
public class TaskDataModel : INotifyPropertyChanged
{
public TaskDataModel()
{
}
private string taskName;
public string TaskName
{
get { return taskName; }
set
{
if (taskName != value)
{
taskName = value;
OnPropertyChanged("TaskName");
}
}
}
}
I'm trying to do a hello world with Reactive UI and Xamarin Forms.
I have created a ViewModel (based on ReactiveObject), a custom page (based on ReactiveContentPage) and some XAML markup.
The page has an entry and a Label, bound together. When I run it (on iOS and Android), it appears to work for the first few characters typed, then locks up. The console gives a 'too much is happening on the main thread' warning.
What am I missing?
The project is here.
The Model
namespace XamarinFormsReactiveUIExample
{
public class MyPageModel : ReactiveObject
{
private string _userName = "";
public string UserName {
get { return _userName; }
set { this.RaiseAndSetIfChanged (ref _userName, value); }
}
}
}
The Page
namespace XamarinFormsReactiveUIExample
{
public partial class MyPage : ReactiveContentPage<MyPageModel>
{
public MyPage ()
{
InitializeComponent ();
}
}
}
The XAML
<?xml version="1.0" encoding="UTF-8"?>
<reactive:ReactiveContentPage
x:TypeArguments="local:MyPageModel"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamarinFormsReactiveUIExample.MyPage"
xmlns:local="clr-namespace:XamarinFormsReactiveUIExample;assembly=XamarinFormsReactiveUIExample"
xmlns:reactive="clr-namespace:ReactiveUI.XamForms;assembly=ReactiveUI.XamForms">
<reactive:ReactiveContentPage.BindingContext>
<local:MyPageModel />
</reactive:ReactiveContentPage.BindingContext>
<reactive:ReactiveContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness"
iOS="0, 150, 0, 0" />
</reactive:ReactiveContentPage.Padding>
<reactive:ReactiveContentPage.Content>
<StackLayout>
<Entry Text = "{Binding UserName}"></Entry>
<Label Text = "{Binding UserName}"></Label>
</StackLayout>
</reactive:ReactiveContentPage.Content>
</reactive:ReactiveContentPage>
I don't see how this could be anything but a Xamarin bug, ReactiveUI isn't doing anything here. Anyways, you can always try to write these bindings the RxUI way:
<Entry x:Name="userNameEntry" />
<Label x:Name="userNameLabel" />
Then, in the constructor:
public MyPage ()
{
InitializeComponent();
this.ViewModel = new MyPageModel();
this.Bind(ViewModel, vm => vm.UserName, v => v.userNameEntry.Text);
this.OneWayBind(ViewModel, vm => vm.UserName, v => v.userNameLabel.Text);
}
The only thing I saw missing was the ViewModel was never instantiated, and the Binding Context was never set. I can't see what your old code did before you changed it to the new style. Personally, I try to avoid using code behind as much as possible as well. So you should be able to modify your constructor to something like,
public MyPage ()
{
InitializeComponent();
this.ViewModel = new MyPageModel();
this.BindingContext = ViewModel;
}
And revert to using your XAML binding.
I have a list of items - when one is selected, I'd like to slide the appbar up. This is what I have so far:
<AppBar IsOpen="{Binding BookIsSelected}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<AppBarButton Icon="Remove" Label="Remove Book" Command="{Binding RemoveBook}" Visibility="{Binding BookIsSelected, Mode=TwoWay, Converter={StaticResource BooleanToVisibilityConverter}}" />
</StackPanel>
</Grid>
</AppBar>
In the gridview of books, I have this:
SelectedItem ="{Binding SelectedBook, Mode = TwoWay}" />
BookIsSelected:
private bool _bookSelected;
public bool BookIsSelected {
get {
return _bookSelected;
}
set {
SetProperty(ref _bookSelected, value);
}
}
I can see the get/set hit when I select a book, but the appbar never flies out. What am I doing wrong?
I can't see any obvious problems with the code that you've shown so far. However, you haven't shown the code for the SelectedBook property or SetProperty method, so perhaps your problem lies there? Your SelectedBook property should look something like this, setting BookIsSelected to true:
private YourDataType _selectedBook;
public YourDataType SelectedBook{
get {
return _selectedBook;
}
set {
SetProperty(ref _selectedBook, value);
BookIsSelected = true;
}
}
However, unless you set the BookIsSelected property back to false at some stage, this will only work once. Your SetProperty method should notify the INotifyPropertyChanged interface of property changes, as #Amer mentioned in the comments. It should look something like this example from the linked page:
private void SetProperty([CallerMemberName] String propertyName = "")
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}