I would like to display the length of a string in a textbox while typing. The code below works in WPF but does not in WinUI3. How must I adapt the code below?
<TextBox Name="tbInput" Text="{x:Bind Path=ViewModel.Input, Mode=TwoWay}" />
<TextBlock>
<Run Text="{Binding ElementName=tbInput, Path=Text.Lenght, Mode=OneWay}" />
</TextBlock>
Use x:Bind:
<TextBlock>
<Run Text="{x:Bind tbInput.Text.Length, Mode=OneWay}" />
</TextBlock>
Or bind directly to the source property (assuming the view model implements INotifyPropertyChanged):
<TextBox Name="tbInput" Text="{x:Bind Path=ViewModel.Input, Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}" />
<TextBlock>
<Run Text="{x:Bind Path=ViewModel.Input.Length, Mode=OneWay}" />
</TextBlock>
Related
I have created a user control having controls in it under a wrap panel, but when i am adding it on run time on other page its wrapping functionality is not working.
I have also tried to take a wrap panel on the page where i want to show the
user control.strong text
[enter image description here][1]
<TextBlock Grid.Column="0" Margin="2,-25,0,0" x:Name="TB4" Width="140" Height="26" FontFamily="{StaticResource inventoryRegularFont}" Text="Auto-Order" Foreground="#414042" FontSize="14" FontWeight="SemiLight" />
<CalendarDatePicker Grid.Column="1" Height="30" Width="220" Margin="-8,-35,0,0" Style="{StaticResource CalendarDatePickerStyleOwn }" FontWeight="Light" FontSize="13" DateFormat = "{}{month.integer}/{day.integer}/{year.full}" Name="DTAutoorder" PlaceholderText="Select Auto-Order Date" BorderBrush="Transparent" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" LostFocus="DTAutoorder_LostFocus" TabIndex="4" />
<TextBlock Grid.Column="1" x:FieldModifier="public" Text="" Name="TBAutoOrderError" FontSize="11" Foreground="red" Margin="20,25,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>
</StackPanel>
Is it possible to bind a control's value to another, like:
<Stepper x:Name="myValue"
Maximum="1000"
Minimum="0"
Value="{Binding myValue,Mode=TwoWay}" />
<Entry Keyboard="Numeric"
Text="{Binding myValue}"
TextColor="Black" />
use {x:Reference } markup extension
<Stepper x:Name="myValue"
Maximum="1000"
Minimum="0"
Value="{Binding myValue, Mode=TwoWay}" />
<Entry Keyboard="Numeric"
Text="{Binding Value, Source={x:Reference myValue}}"
TextColor="Black" />
I have written a code to show some input boxes and a connect button. But when I enter value to the input box it hides my connect button, I try to scroll it bounces back?
What could be the source of this issue?
<ScrollViewer>
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<StackPanel Grid.Row="0">
<TextBlock Text="" ></TextBlock>
<TextBlock Text="{Binding Path=LocalizedResources.LoginPromptSignInText, Source={StaticResource LocalizedStrings}}" FontSize="30"></TextBlock>
<TextBlock Text="" ></TextBlock>
<TextBlock Text="{Binding Path=LocalizedResources.UsernameText, Source={StaticResource LocalizedStrings}}" ></TextBlock>
<TextBox x:Name="TextBlockUserName" ></TextBox>
<TextBlock Text="{Binding Path=LocalizedResources.PasswordText, Source={StaticResource LocalizedStrings}}" ></TextBlock>
<StackPanel x:Name="PasswordPanel"/>
<CheckBox x:Name="CheckBoxShowPassword" Click="ShowPassword" Content="{Binding Path=LocalizedResources.LoginPromptShowPasswordText, Source={StaticResource LocalizedStrings}}"></CheckBox>
<TextBlock Text="{Binding Path=LocalizedResources.LoginPromptDomainText, Source={StaticResource LocalizedStrings}}"></TextBlock>
<TextBox x:Name="tbDomain" ></TextBox>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button x:Name="ButtonExit" Content="{Binding Path=LocalizedResources.LoginPromptExitButtonText, Source={StaticResource LocalizedStrings}}" Grid.Row="2" Grid.Column="0" ></Button>
<Button x:Name="ButtonConnect" Content="{Binding Path=LocalizedResources.LoginPromptConnectButtonText, Source={StaticResource LocalizedStrings}}" Grid.Row="2" Grid.Column="1" ></Button>
</Grid>
</StackPanel>
</Grid>
</ScrollViewer>
You could use a ListBox instead of a scroll viewer, also you could try adjusting the Height property of the ScrollViewer.
I would suggest using the ApplicationBar for your buttons. The keyboard shows above the ApplicationBar so the buttons will always be visible.
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<ScrollViewer>
<StackPanel>
<TextBlock Text="" ></TextBlock>
<TextBlock Text="Sign In" FontSize="30"/>
<TextBlock Text="" ></TextBlock>
<TextBlock Text="Username" />
<TextBox x:Name="TextBlockUserName" />
<TextBlock Text="Password" TextTrimming="WordEllipsis" />
<TextBox x:Name="TextBlockPassword" />
<StackPanel x:Name="PasswordPanel"/>
<CheckBox x:Name="CheckBoxShowPassword" Content="ShowPassword"></CheckBox>
<TextBlock Text="Domain"/>
<TextBox x:Name="tbDomain"/>
</StackPanel>
</ScrollViewer>
</Grid>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar>
<shell:ApplicationBarIconButton Text="connect" IconUri="Assets\done.png" Click="OnConnectButtonClick"/>
<shell:ApplicationBarIconButton Text="cancel" IconUri="Assets\cancel.png" Click="OnCancelButtonClick"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
I have a bunch of controls in a collection of stackpanels that is contained in a grid. The grid is pretty long and runs off the page so I have put it in to a scrollviewer. Everything works perfectly and I can scroll up and down my page until the keyboard is active. Once that happens, I am not able to scroll the content all the way to the bottom when a textbox is highlighted. I can scroll to a certain extent but not all the way down. Am I doing something wrong? My code is as follows:
<ScrollViewer Margin="12,0,12,0" Grid.Row="1">
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Height="837" Width="456">
<StackPanel HorizontalAlignment="Left" Width="450" Margin="0,63,0,405">
<TextBlock Height="30" Name="tBlk_Username" Text="Display Name" />
<TextBox Height="71" Name="tb_UserNameVal" Text="{Binding UserNameValue, Mode=TwoWay}" Width="452" />
<TextBlock Height="30" Name="tBlk_Email" Text="Email" />
<TextBox Height="71" Name="tb_EmailVal" Text="{Binding EmailValue, Mode=TwoWay}" Width="452" />
<TextBlock Height="30" Name="tBlk_Message" Text="Message" />
<TextBox Height="130" Name="tb_MessageVal" Text="{Binding MessageValue, Mode=TwoWay}" Width="452" />
</StackPanel>
<StackPanel Height="37" HorizontalAlignment="Left" Margin="0,519,0,0" Name="stackPanel2"
VerticalAlignment="Top" Width="450">
<TextBlock Height="30" Name="tBlk_PicInfo" Text="Include a Photo" />
</StackPanel>
<StackPanel Orientation="Horizontal" Height="90" HorizontalAlignment="Left" Margin="12,432,0,0"
Name="stackPanel1" VerticalAlignment="Top" Width="450" d:LayoutOverrides="GridBox">
<TextBox Height="71" Name="tb_Location" Text="{Binding Location}" Width="367" IsReadOnly="True" />
<Button Height="60" Name="btn_Clear" Width="60" BorderThickness="0" Background="{Binding LocationImage}" Style="{StaticResource LocationButtonStyle}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<GalaSoft_MvvmLight_Command:EventToCommand x:Name="ClearCommand" Command="{Binding ClearCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="205" HorizontalAlignment="Left" Margin="12,556,0,0"
Name="stackPanel3" VerticalAlignment="Top" Width="452" d:LayoutOverrides="GridBox">
<Image Name="img_FlickrPic" Stretch="Fill" Width="260" Source="{Binding Capture}" Margin="0,13,0,0" />
<Button Name="btn_Capture" Width="90" Height="90" Margin="0,67,0,55" BorderThickness="0">
<Button.Background>
<ImageBrush ImageSource="/Images/camera.png" />
</Button.Background>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<GalaSoft_MvvmLight_Command:EventToCommand x:Name="CaptureClick" Command="{Binding CaptureCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="100" HorizontalAlignment="Left"
Margin="4,763,0,0" Name="stackPanel4" VerticalAlignment="Top" Width="450" d:LayoutOverrides="GridBox">
<Button Content="Submit" Height="71" Name="btn_Submit" Width="130" IsEnabled="{Binding SubmitEnabled}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<GalaSoft_MvvmLight_Command:EventToCommand x:Name="SubmitCommand" Command="{Binding SubmitCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</StackPanel>
<StackPanel Height="59" HorizontalAlignment="Left" Name="stackPanel5" VerticalAlignment="Top" Width="456" Orientation="Horizontal">
<TextBlock FontFamily="{StaticResource HelveticaNeue}" Name="tBlk_StepConf" Text="Please share my " Width="150" TextAlignment="Center" Height="33" />
<TextBlock FontFamily="{StaticResource HelveticaNeue}" Foreground="#FF00BCE4" Name="tBlk_StepConfCount" Text="{Binding StepVal}" Width="56" FontSize="34" TextAlignment="Center" VerticalAlignment="Top" />
<TextBlock FontFamily="{StaticResource HelveticaNeue}" Name="tBlk_StepConfTrail" Text=" steps for water" Width="134" TextAlignment="Center" Height="40" />
</StackPanel>
</Grid>
</ScrollViewer>
The problem is that the ScrollViewer doesn't pay attention to the Soft Input Panel (or keyboard), so it only scrolls as long as it can behind the keyboard so to speak.
A simple solution is to add a margin to the bottom of the content control of the ScrollViewer.
The longer and more complicated solution is to add the margin when the SIP is displayed. Unfortunately there's no event for it, but I guess one could listen to when a textbox gains or loses focus, and set a margin or perhaps show a control at the bottom of the page when a textbox has focus (and hence the SIP is displayed) and hide it when it doesn't.
I have a WPF window that has several Listbox and DataGrid controls. The main Listbox displays a list of Contractors. An Address(s) datagrid is bound to the Contractor ListBox and displays address(s) for the current selected Contractor.
I want users of this Window(WPF) to be able to add Addresses to the selected Contractor using the native Datagrid Add functionality. I also want the users to be able to edit associated Address records by clicking in the datagrid cell and having the cell function as an AutoCompleteBox.
I have partially successfully implemented the AutoCompleteBox in the State column of the datagrid control. Currently, the correct Text value for the current Contractor is displayed in the State column of the Address datagrid. If i edit the State cell I get expected autocomplete functionality and I can select a new State.
What is not working is the TwoWay binding. Currently, if I change the current Address state it does not save back to the entity model or the db. Its not surprising since I know I dont have Twoway binding implemented correctly on this control.
I have successfully implemented the Twoway binding with a combobox but the combobox obviously does not provide the autocomplete functionality I need.
Update
We worked on this late yesterday and arrive at a partial solution. Now we have a new issue.
With a ComboBox you can have:
DisplayMemberPath ="StateAbbrv"
SelectedValue="{Binding Path=tbl_Address.StateID, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" and
SelectedValuePath="StateID".
With the AutoCompleteBox it seems you really only have:
ValueMemberPath="StateID" and
Text="{Binding Path=tbl_Address.StateID, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource StateConverter}}" Grid.Column="1" Grid.Row="1" Margin="0,0,0,0" >
With the AutoCompleteBox you can’t have separate display and selected values. Because of my Window control binding and database structure I need to display a string value such as “CA California” while actually having a selected table key integer value in the background.
To be clear, we need to have separate Display and Selected values in the Text part of the AutoCompleteBox control.
Here is the Master ListBox displaying Contractors:
<Grid DataContext="{StaticResource tbl_PartnerViewSource}" HorizontalAlignment="Left" Name="grid3" VerticalAlignment="Top" Height="242" Width="295" Grid.Column="1" Margin="0,1,0,0" Grid.Row="3">
<Grid.RowDefinitions>
<RowDefinition Height="31*" />
<RowDefinition Height="211*" />
</Grid.RowDefinitions>
<Label Content="Contractor List" FontWeight="Bold" Height="25" Margin="0,0,169,0" Name="label10" Padding="3" VerticalAlignment="Top" />
<ListBox DisplayMemberPath="tbl_Organization.OrgName" Height="212" HorizontalAlignment="Right" ItemsSource="{Binding}" Margin="0,30,0,0" Name="orgNameListBox" SelectedValuePath="PtnrID" VerticalAlignment="Center" Width="294" IsSynchronizedWithCurrentItem="True" Grid.RowSpan="2" SelectionChanged="orgNameListBox_SelectionChanged" TabIndex="11" MouseDoubleClick="orgNameListBox_MouseDoubleClick" DataContextChanged="orgNameListBox_DataContextChanged" SourceUpdated="orgNameListBox_SourceUpdated" IsManipulationEnabled="True" />
</Grid>
Here is the Stack Panel containing the Datacontext supporting the controls in discussion:
<StackPanel Grid.Row="3" Height="243" HorizontalAlignment="Left" Name="stackPanel5" VerticalAlignment="Top" Width="295" Grid.Column="1"></StackPanel>
<Label Content="Address(s)" FontWeight="Bold" Height="25" HorizontalAlignment="Left" Margin="306,0,0,0" Name="label1" Padding="3" VerticalAlignment="Top" Width="648" Grid.Column="1" Grid.Row="1" />
<DataGrid Name="dataGridAddress" DataContext="{StaticResource tbl_Partnertbl_PartnerAddressViewSource}" ItemsSource="{Binding}" SelectionMode="Single" SelectionUnit="CellOrRowHeader" AutoGenerateColumns="False" AlternatingRowBackground="#FFFF003B" AlternationCount="2" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" Margin="308,22,0,0" Width="649" Height="113" VerticalAlignment="Top" CanUserDeleteRows="True" CanUserAddRows="True">
<DataGrid.Columns>...
Here is the AutoCompleteBox that is partially working:
<DataGridTemplateColumn x:Name="addState" Header="State" Width="100">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<my1:AutoCompleteBox Name="autoCompleteBox1"
IsTextCompletionEnabled="True"
ItemsSource="{Binding Source={StaticResource tbl_StateViewSource}}"
ValueMemberPath="StateID"
Text="{Binding Path=tbl_Address.StateID, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1" Grid.Row="1" Margin="0,0,0,0" >
<my1:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=StateAbbrv}" Width="30" FontWeight="Bold" Margin="0,0,0,0" />
<TextBlock Text="{Binding Path=StateName}" />
</StackPanel>
</DataTemplate>
</my1:AutoCompleteBox.ItemTemplate>
</my1:AutoCompleteBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
Here is the Combobox with working TwoWay binding:
<GridViewColumn x:Name="addrState" Header="State" Width="75">
<GridViewColumn.CellTemplate>
<DataTemplate>
<ComboBox Name="comboAddressState" SelectedValue="{Binding Path=tbl_Address.StateID, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="{StaticResource Margin2}" DisplayMemberPath="StateAbbrv" SelectedValuePath="StateID" ItemsSource="{Binding Source={StaticResource tbl_StateViewSource}}" IsSynchronizedWithCurrentItem="False" IsEnabled="True" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
Here is the Windows.Resource Section:
<Window.Resources>
<CollectionViewSource x:Key="tbl_PartnerViewSource" d:DesignSource="{d:DesignInstance my:tbl_Partner, CreateList=True}"></CollectionViewSource>
<CollectionViewSource x:Key="tbl_Partnertbl_PartnerAddressViewSource" Source="{Binding Path=tbl_PartnerAddress, Source={StaticResource tbl_PartnerViewSource}}" />
<CollectionViewSource x:Key="tbl_Partnertbl_PartnerContactViewSource" Source="{Binding Path=tbl_PartnerContact, Source={StaticResource tbl_PartnerViewSource}}" />
<CollectionViewSource x:Key="tbl_Partnertbl_PartnerContacttbl_PartnerContactCommChanAddrViewSource" Source="{Binding Path=tbl_PartnerContactCommChanAddr, Source={StaticResource tbl_Partnertbl_PartnerContactViewSource}}" />
<CollectionViewSource x:Key="tbl_Partnertbl_PartnerSystemViewSource" Source="{Binding Path=tbl_PartnerSystem, Source={StaticResource tbl_PartnerViewSource}}" />
<CollectionViewSource x:Key="tbl_Partnertbl_PartnerAliasViewSource" Source="{Binding Path=tbl_PartnerAlias, Source={StaticResource tbl_PartnerViewSource}}" />
<CollectionViewSource x:Key="tbl_Partnertbl_PartnerCommentViewSource" Source="{Binding Path=tbl_PartnerComment, Source={StaticResource tbl_PartnerViewSource}}" />
<CollectionViewSource x:Key="tbl_ServicedCustomerViewSource" d:DesignSource="{d:DesignInstance my:tbl_ServicedCustomer, CreateList=True}" />
<CollectionViewSource x:Key="tbl_SystemViewSource" d:DesignSource="{d:DesignInstance my:tbl_System, CreateList=True}" />
<CollectionViewSource x:Key="tbl_PlatformViewSource" d:DesignSource="{d:DesignInstance my:tbl_Platform, CreateList=True}" />
<CollectionViewSource x:Key="tbl_ManufacturerViewSource" d:DesignSource="{d:DesignInstance my:tbl_Manufacturer, CreateList=True}" />
<CollectionViewSource x:Key="tbl_StateViewSource" d:DesignSource="{d:DesignInstance my:tbl_State, CreateList=True}" />
<CollectionViewSource x:Key="tbl_ZIPViewSource" d:DesignSource="{d:DesignInstance my:tbl_ZIP, CreateList=True}" />
<CollectionViewSource x:Key="tbl_CityViewSource" d:DesignSource="{d:DesignInstance my:tbl_City, CreateList=True}" />
<Thickness x:Key="Margin1">8,-3,-7,-3</Thickness>
<Thickness x:Key="Margin2">-7,-3,-7,-3</Thickness>
</Window.Resources>
Here is a image of the Window(WPF):