Binding issue using slider in ListView in Maui - binding

the environment:
Visual Studio 17.4.3
Dotnet 7 v101
Mvvm Community 8.0
When I try on windows application to use a slider in a list view the slider doesn't get binded correctly to the items of the list view (at least my uneducated guess). The slider looks to be in de default state.
i have a model for changeable properties like this:
public class ChangeableProperty {
public int MinValue {get;set;}
public int MaxValue {get;set;}
public int Value {get;set;}
}
[ObservableProperty]
IEnumerable<ChangeableProperty> dynamicProperties;`
I get them from the backend and try to show them in the Maui App using Mvvm Toolkit.
The ListView is showing and in the first column I added some labels to show the values.
When using the slider the values are not used.
The source is
<ListView ItemsSource="{Binding DynamicProperties, Mode=TwoWay}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="imaging:ChangeableProperty">
<ViewCell>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0"
Grid.Column="0"
Text="{Binding Name}"
FontAttributes="Bold"/>
<Label Grid.Row="1"
Grid.Column="0"
Text="{Binding Value, Mode=OneWay}"
FontAttributes="Italic"/>
<Label Grid.Row="2"
Grid.Column="0"
Text="Min"
FontAttributes="Bold"/>
<Label Grid.Row="3"
Grid.Column="0"
Text="{Binding StartValue, Mode=OneWay}"
FontAttributes="Italic"/>
<Label Grid.Row="4"
Grid.Column="0"
Text="Max"
FontAttributes="Bold"/>
<Label Grid.Row="5"
Grid.Column="0"
Text="{Binding EndValue, Mode=OneWay}"
FontAttributes="Italic"/>
<Slider Grid.Column="1"
Grid.Row="0"
Grid.RowSpan="4"
x:Class="ChangeableProperty"
Minimum="{Binding MinValue}"
Maximum="{Binding MaxValue}"
VerticalOptions="Center"
Value="{Binding Value, Converter{StaticResource DoubleToIntConverter}}"
MinimumTrackColor="Red"
MaximumTrackColor="Blue"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView>
The slider appears to have the default settings. Is it possible to have the changed in a property notified? The demos I saw are related to showing only the list (so when entries available show them) but not for editing using a slider.
Is this a known issue or is it not possible to use a slider in a list view like this?
Kind regards

Yes, this issue can be replicated when setting binding to the Slider. The binding value of the Slider fails to change when using binding. This issue looks similar to an existing one in Github:Setting Slider.Maximum or Slider.Minimum resets binding of Slider.Value. You can follow up there.
Also, you can raise a new issue on Github via this link:https://github.com/dotnet/maui/issues/new/choose

Related

I would like to Gone the button

In xamarin Android we have "Visibility.Gone;" to hide the button. In Xamarin Forms we have IsVisible="{Binding State}", but this only will make view invisible, space remain there.
Please let me know solution.
Regards
In your view model you need to have something similar to the following:
public bool State{
get {
return _state;
}
set {
_state= value;
RaisePropertyChanged ("State");
}
}
According to the Xamarin documentation found here the element should be removed from the visual tree and not take up any space.
Edit:
I'm not sure how you're setting the Column="5" on your grid. There is no attribute for Grid that contains column; however, I am able to produce the effect you looking for with the following code.
<Grid BackgroundColor="Gray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="0,-3,-20,-3" Android="0, -5, 0, -5" WinPhone="20, 20, 20, 20" />
</Grid.Padding>
<BoxView Color="Blue" Grid.Column="0"></BoxView>
<BoxView Color="Green" Grid.Column="1" IsVisible="{Binding State}"></BoxView>
<BoxView Color="Blue" Grid.Column="2"></BoxView>
<BoxView Color="Green" Grid.Column="3"></BoxView>
</Grid>
Details:
You are correct in that setting the label visibility to false in a grid will maintain the space allocated to the control in the grid. What you can do is set the grid <ColumnDefinition Width="Auto" /> or <RowDefinition Height="Auto" /> and put your label into that column or row. This will automatically remove the space allocated for the control when the visibility is set to false. Below is a screenshot of the effect you are getting (left) and the effect after setting the Definition to Auto (right).

WPF: Customized control focus management

I was tying to set focus on a TextBox used to build a customized "Numeric Up Down" control.
This is the custom "Numeric Up Down"
<Style x:Key="SpinButton" TargetType="Slider" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Border Grid.RowSpan="3" BorderThickness="1,1,1,1" BorderBrush="WhiteSmoke">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=".5*"/>
<RowDefinition Height=".5*"/>
</Grid.RowDefinitions>
<TextBox Name="textBoxNumericUpDown" Grid.RowSpan="3" Margin="2,0,0,0" Text="{Binding Value,Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" FontSize="20" VerticalAlignment="Center" Background=" {x:Null}" Foreground="White" BorderThickness="0" CaretBrush="White" IsTabStop="True"/>
<RepeatButton Grid.Column="1" Grid.Row="0" Margin="0,0,-5,0" Command="Slider.IncreaseLarge" Style="{StaticResource TimeRepeatButtonStyle}" Content="+" Background="{x:Null}" BorderBrush="White" Foreground="White" FontSize="18" Cursor="Hand" Width="44" Height="44" IsTabStop="False"/>
<RepeatButton Grid.Column="1" Grid.Row="1" Command="Slider.DecreaseLarge" Margin="0,1,-5,0" Style="{StaticResource TimeRepeatButtonStyle}" Content="-" Background="{x:Null}" BorderBrush="White" Foreground="White" FontSize="18" Cursor="Hand" Width="44" Height="44" IsTabStop="False"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Usage
<Slider PreviewTextInput="textBoxTimeMinute_PreviewTextInput" Name="textBoxTimeMinute" Width="100" Style="{StaticResource SpinButton}" Maximum="999" Margin="8" HorizontalAlignment="Left" Minimum="0" IsTabStop="True" TabIndex="0"/>
<Label Grid.Column="1" Content=":" VerticalAlignment="Center" IsTabStop="False"/>
<Slider PreviewTextInput="textBoxTimeSecond_PreviewTextInput" Grid.Column="2" Name="textBoxTimeSecond" Width="100" Style="{StaticResource SpinButton}" Maximum="60" Margin="8" HorizontalAlignment="Left" Minimum="-1" IsTabStop="True" TabIndex="1"/>
Wanted result (Automatic focus on the first textbox if no number inside)
Wanted result (Automatic focus on the first textbox if number inside, number is selected)
I tried different ways to make it select the correct Control, but it always selects the outer layer. In my case The Grid/Border.
Only after I press TAB I can have it select the correct TextBox Control.
Is there any way in WPF I can achieve the focus on textbox without pressing TAB?
Solved:
If you want to focus a TextBox inside a ControlTemplate you have to set up a trigger on the "IsFocused" property.
When it becomes true then you have to set the FocusManager.FocusedElement field to the name of the TextBox (or other control) you want to focus.
Below is the code I used to achieve this:
<ControlTemplate TargetType="Slider">
<TextBox x:Name="TextBoxToFocus"/> //The textbox(or any other element) I want to set focus to. It is very important to have it named, otherwise I won't know which control to focus.
<ControlTemplate.Triggers> //The trigger
<Trigger Property = "IsFocused" Value = "True" /> //The property the trigger is watching
<Setter TargetName="TextBoxToFocus" Property="FocusManager.FocusedElement" Value="{Binding ElementName=NumericUpDown}"/> //Setter when the trigger executes
</Trigger>
</ControlTelmplate.Triggers>

win phone scrolling ListBox not working

in win phone when having two Grids one after another and each has it's own listBox the scrolling is not working.
Any ideas ?
<Grid x:Name="LayoutRoot"
Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel1" Grid.Row="1" Margin="12,0,12,0">
<ListBox x:Name="lstData1"
ItemsSource="{Binding Source={StaticResource productCollection}, Path=DataCollection}">
<ListBox.ItemTemplate>
<DataTemplate>
.................
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
<Grid x:Name="ContentPanel2" Grid.Row="2" Margin="12,0,12,0">
<ListBox x:Name="lstData2"
ItemsSource="{Binding Source={StaticResource productCollection}, Path=DataCollection}">
<ListBox.ItemTemplate>
<DataTemplate>
..................
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
Thank you
Best Regards
Height must be specified for the scroll to work

Suppress tilt effect on listbox item wp7

I have a listbox with for data templates, and I want to disable the tilt effect on one of the data templates, but it is not working... this is what I've been trying:
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" x:Name="MainListBox" Margin="0,10,0,0" SelectionChanged="MainListBoxSelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<local:Datatemplates Content="{Binding}">
<local:Datatemplates.ThirdItem>
<DataTemplate>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,10" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" toolkit:TiltEffect.SuppressTilt="True">
<TextBlock Text="{Binding Title}" TextWrapping="NoWrap" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Style="{StaticResource PhoneTextGroupHeaderStyle}" toolkit:TiltEffect.SuppressTilt="True"/>
<TextBlock Text="{Binding SubTitle1}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSmallStyle}" toolkit:TiltEffect.SuppressTilt="True"/>
<TextBlock Text="{Binding SubTitle2}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSmallStyle}" toolkit:TiltEffect.SuppressTilt="True"/>
</StackPanel>
</Grid>
</DataTemplate>
</local:Datatemplates.ThirdItem>
</local:ProfileSetupDatatemplates>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I already tried to put the suppress tilt effect everywhere it wasn't working.
What am I missing
TiltEffect is only applied to button controls (Button, CheckBox, etc.) and ListBoxItems, so trying to suppress it on a Stackpanel won't work.
So:
you should be able to tweak your template like so:
<DataTemplate>
<ListBoxItem toolkit:TiltEffect.SuppressTilt="True" >
...your code
</ListBoxItem>
</DataTemplate>

How do I make a Silverlight popup with a TextBox fill its parent?

I have a popup within a user control. The popup uses a TextBox to show a textual preview of data produced by the control.
How do I make the popup size itself to the user control it's inside of? With code as shown below, I find that the text box is sized according to its content, and the popup is sized according to the textbox.
It works fine if I use fixed sizes in my row and column definitions, but I would like to popup to resize itself to match the user control (which in turn matches the browser).
<UserControl
<!-- usual stuff here -->
>
<Grid>
<!-- layout for the user control here -->
<!-- and after that my popup: -->
<Popup Name="MyPopup">
<Border BorderBrush="Black" BorderThickness="2" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="22"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Text="Preview:" Margin="5" ></TextBlock>
<TextBox
Grid.Row="1"
Name="MyTextBox"
IsReadOnly="True"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible"
TextWrapping="Wrap"
Margin="5"
>
</TextBox>
</Grid>
</Border>
</Popup>
</Grid></UserControl>
The C# code to do this would be something like:
textBox1.Width = UserControl.Width;
textBox1.Height = UserControl.Height;
textBox1.Margin = UserControl.Margin;
The key here is resetting the margin. I know this works in WPF to, say, fill a Window with a TextBox. Give it a try, see if it works.

Resources