I'm trying to line up a TextBox and a ComboBox inside of a StackPanel, but the ComboBox seems to have some extra space at the top of it that I can't get rid of.
How can I get these two controls to align with each other properly?
<StackPanel Orientation="Horizontal">
<TextBox IsTextPredictionEnabled="False" Margin="0,0,0,0" BorderBrush="Gray"
Text="{Binding ZoneName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
PlaceholderText="YourCompany"/>
<ComboBox VerticalAlignment="Stretch" BorderBrush="Gray" Padding="0,0,0,0" Margin="0,0,0,0"
ItemsSource="{Binding Path=DomainChoices}"
SelectedValue="{Binding Path=SelectedDomainChoice, Mode=TwoWay}"
SelectedValuePath="{Binding id}"
DisplayMemberPath="{Binding text}"
Foreground="Black" Width="200">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding text}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
When you take a look at ComboBox's style then you will find that <Border x:Name="ShortListOuterBorder" .... has a Margin with value of Margin="{ThemeResource PhoneTouchTargetOverhang}". This resource is defined in the style above:
<Thickness x:Key="PhoneTouchTargetOverhang">0,9.5</Thickness>
You can easily define your own style in which you can change the above value, or change margin of the Border. You can also try to set the margin of your ComboBox to 0,-9.5,0,0 without applying the style.
Related
I am collecting messages from a com port. When the message is received a time stamp is recorded. I then display the time stamp followed by the message. It looks like:
01/02/2022 13:14:15.123 00 48 B4 68 33
I want to add a checkbox that will show the timestamp when checked, and just the message when unchecked.
My XAML for displaying the timestamp and message:
<ListBox Grid.Row="1" x:Name="MessageList" Margin="10" ItemsSource="{Binding Path=SDIMessages}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding RecivedTime, StringFormat=dd-MM-yyyy HH:mm:ss.fff}"/>
<TextBlock Text="{Binding Message}" Margin="10,0,0,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
My code for the checkbox
<CheckBox Grid.Row="0" VerticalAlignment="Bottom" Margin="10,0,0,0" IsChecked="{Binding ShowTimeStamp, Mode=TwoWay}" Content="Display Time Stamp"/>
Currently I have the binding for ShowTimeStamp working correctly. How do I hide the TimeRecived? I am still learning C#, XAML and MVVM. I believe I need to use a datatrigger somehow but how do I make the trigger from the checkbox affect a listbox?
you can give checkbox a name ("CheckTimeStamp") and bind TextBlocks Visibility directly to IsChecked property (without involving view model) using BooleanToVisibilityConverter:
<CheckBox Grid.Row="0" Name="CheckTimeStamp" VerticalAlignment="Bottom" Margin="10,0,0,0" IsChecked="{Binding ShowTimeStamp, Mode=TwoWay}" Content="Display Time Stamp"/>
<ListBox Grid.Row="1" x:Name="MessageList" Margin="10" ItemsSource="{Binding Path=SDIMessages}">
<ListBox.Resources>
<BooleanToVisibilityConverter x:Key="boolToVisibility"/>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding RecivedTime, StringFormat=dd-MM-yyyy HH:mm:ss.fff}"
Visibility="{Binding ElementName=CheckTimeStamp, Path=IsChecked, Converter={StaticResource boolToVisibility}}"/>
<TextBlock Text="{Binding Message}" Margin="10,0,0,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So I have a listbox and I'm trying to use a stackpanel inside as an item with a border. Now I want every item to be the same width as my listbox, which is anchored to the sides of the window. I found how to set the width relative to the parent but for some reason it turns out to be wider. Can't seem to figure out why. Picture below code of how it looks.
<ListBox x:Name="listBoxSecrets" Margin="10,107,10,10" Background="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Orange" CornerRadius="2,2,2,2" BorderThickness="2,2,2,2">
<StackPanel Background="White"
Width="{Binding RelativeSource=
{RelativeSource FindAncestor,
AncestorType={x:Type ListBox}},
Path=ActualWidth}"
>
<TextBlock Text="{Binding Path=Name}" />
<TextBlock Text="{Binding Path=Totp}" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
ListBox.ActualWidth is too much for ListBoxItems. But ListBoxItems will use all available width if ListBox has HorizontalContentAlignment set to "Stretch":
<ListBox HorizontalContentAlignment="Stretch"
I've created panel which displays controls. However I want the list of controls to always fit the width of the window. Similar to how visual studios Properties panel works. I'm assuming by using listbox I'll automatically inherit the scrollbar when the controls become lengthy.
What i have now on the left and the goal on the right.
This is visual studios.
My code behind looks like this...
<ListBox Grid.Column="0" x:Name="AssetList" ItemsSource="{Binding Attributes}" SelectionMode="Extended">
<ListBox.Resources>
<DataTemplate DataType="{x:Type model:IntAttr}">
<WrapPanel>
<TextBlock Text="{Binding Key}" Foreground="Blue"></TextBlock>
<TextBlock Text=" "></TextBlock>
<TextBlock Text="{Binding Value}"></TextBlock>
</WrapPanel>
</DataTemplate>
</ListBox.Resources>
</ListBox>
Solution:
<ListBox HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Visible"
Grid.Column="0"
x:Name="AssetList"
ItemsSource="{Binding Attributes}"
SelectionMode="Extended">....
So I have a few ListViews. The first is binded to ObservaleCollection<ComPort>. All properties of ComPort may take some predefined values. Other ListViews are responsible for that properties: they show all that possible (predefined) values and SelectedItem should be the current value of that property of ComPort from the first ObservaleCollection.
I can't attach images so here is an external picture, it would make the situation clean: http://i.stack.imgur.com/ZBRRx.png
<Window.Resources>
<ResourceDictionary x:Name="rd">
<l:ComPorts x:Key="vComPorts"/>
<l:SystemPorts x:Key="vSystemPorts"/>
<l:BaudRates x:Key="vBaudRate"/>
<l:Parities x:Key="vParities"/>
<l:DataBits x:Key="vDataBits"/>
<l:StopBits x:Key="vStopBits"/>
<l:Timeouts x:Key="vTimeouts"/>
<l:ComPort x:Key="vSelectedPort"/>
</ResourceDictionary>
</Window.Resources>
...
<ListView
Name="PortsList"
Grid.Row="1"
Grid.Column="0"
Margin="5"
VerticalAlignment="Stretch"
ItemsSource="{StaticResource vComPorts}"
DataContext="{StaticResource vComPorts}"
SelectedValuePath="PortName"
SelectedValue="{Binding ElementName=SystemPortsList, Path=SelectedItem.Value}"
SelectionChanged="PortsList_SelectionChanged"
MouseDoubleClick="PortsList_MouseDoubleClick">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox />
<TextBlock Margin="5,0,0,0" Text="{Binding Path=Name}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView
x:Name="SystemPortsList"
Margin="5"
VerticalAlignment="Stretch"
DataContext="{Binding Source={StaticResource vSelectedPort}}"
ItemsSource="{Binding Source={StaticResource vSystemPortsView}}"
SelectedItem="{Binding Source={StaticResource vSelectedPort}, Path=PortName}"
MouseEnter="SystemPortsList_Refresh"
MouseLeave="SystemPortsList_Refresh"
Grid.Row="1"
Grid.Column="1" SelectionChanged="SystemPortsList_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Name="tb" Margin="5,0,0,0" Text="{Binding Path=Name}" />
</StackPanel>
</ListView.ItemTemplate>
</ListView>
I've tried to make an instance of class ComPort for saving current value of selected item from the first ListView, but anyway I can't cope with it without help. How this task should be solved?
1) Instead of handling SelectionChanged on the PortsList ListView, bind your checkbox to the ListViewItemsPanel like so:
<CheckBox IsChecked={Binding IsSelected, RelativeSource=Parent/>
2) Add an x:Name to your first ListBox, say x:Name="ComPortLB";
3) Remove DataContext on SystemPortsList;
4) Fix SelectedItem on SystemPortsList like so:
SelectedValue="{Binding ElementName=ComPortLB, Path=SelectedValue.PortName}"
I haven't tested any of this code and I haven't done this kind of stuff for a while, so I apologize for errors, but it should get you closer. I've also had to make some assumptions about your classes since you don't provide enough information.
I have seen a lot of questions and answers with almost the same problem, but none of these answers arent working for me. Soo, my code is:
<ListBox ItemsSource="{Binding Avakuvaandmed}" x:Name="lboxandmed" HorizontalAlignment="Left" Height="552" VerticalAlignment="Top" Width="970" SelectionChanged="lboxandmed_SelectionChanged" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" x:Name="spanVärviSeda">
I HAVE TO GET VALUE OF THIS --> <TextBlock x:Name="IDbox" Width="50" Text="{Binding Id}"></TextBlock>
<TextBlock Width="130" Text="{Binding Nrmärk}"></TextBlock>
<TextBlock x:Name="txtKehtivus" Width="130" Text="{Binding Lõpp}"></TextBlock>
<TextBlock Width="130" Text="{Binding Eesnimi}"></TextBlock>
<TextBlock Width="130" Text="{Binding Perenimi}"></TextBlock>
<TextBlock Width="130" Text="{Binding Mark}"></TextBlock>
<TextBlock Width="130" Text="{Binding Mudel}"></TextBlock>
<TextBlock Width="130" Text="{Binding Aasta}"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And I have to get the value of the textblock named "IDbox".
Please can someone help me, or atleast give me a clue how.
Your code looks correct. If you want to access the Value of IDbox in code behind then you can do it by Avakuvaandmed.ElementAt(rowno).Id because you are binding Id to the IDBox. If you want to access the BoxId value in xaml. Then use binding as follows:
{Binding Avakuvaandmed[rowno],Path=Id}
You can also access Textblock value by using VisualTreeHelper class. You will need to go traverse all elements in ListBox.