We Keep Coding

Image in ListView Expand to ListView container size keeping aspect ratio

I am making kind of a picture carousel in my app using a ListView with horizontal scrolling.
The height of my ListView is binded to the window, so it can change.
My images are always way bigger than the height of my view and I can't figure out how to make sure the image dosen't take more space than it has.
(height should be = height of the ListView - the height of the Checkbox - height of the ScrollBar)
<ListView x:Name="listView1" Margin="18,226,15,10" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" CanVerticallyScroll="False" >
<CheckBox Content="Select" />
<Image Source="{Binding Source}" Margin="1" VerticalAlignment="Center" >
<Image.InputBindings>
<MouseBinding MouseAction="LeftDoubleClick" Command="{Binding MouseDoubleClickCommand}" CommandParameter="{Binding Source}"/>
</Image.InputBindings>
</Image>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" CanVerticallyScroll="False"></StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>

The issue is that a StackPanel has no notion of available space. It just stacks its children and if there is not enough space to accomodate them, they will be cut-off by the containing element.
In order to make your images size to fit the available space, you could use a Grid with two rows. The first using a Height of Auto to make it take only as much space as the CheckBox needs and the second using the default size of one star to take up the remaining space.
Columns and rows that are defined within a Grid can take advantage of Star sizing to distribute remaining space proportionally. When Star is selected as the height or width of a row or column, that column or row receives a weighted proportion of the remaining available space.
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<CheckBox Content="Select"/>
<Image Grid.Row="1" Source="{Binding Source}" Margin="1" VerticalAlignment="Center">
<Image.InputBindings>
<MouseBinding MouseAction="LeftDoubleClick" Command="{Binding MouseDoubleClickCommand}" CommandParameter="{Binding Source}"/>
</Image.InputBindings>
</Image>
</Grid>
</DataTemplate>
Alternatively, you can use a DockPanel with LastChildFill set to true (default).
If you set the LastChildFill property to true, which is the default setting, the last child element of a DockPanel always fills the remaining space, regardless of any other dock value that you set on the last child element.
<DataTemplate>
<DockPanel>
<CheckBox DockPanel.Dock="Top" Content="Select"/>
<Image Source="{Binding Source}" Margin="1" VerticalAlignment="Center">
<Image.InputBindings>
<MouseBinding MouseAction="LeftDoubleClick" Command="{Binding MouseDoubleClickCommand}" CommandParameter="{Binding Source}"/>
</Image.InputBindings>
</Image>
</DockPanel>
</DataTemplate>

Visual C#: Can't find correct relative width for 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"

WPF Dockpanel extending beyond width of parent

I am attempting to create a dock panel inside of a list view data template that takes up all of the available width of its parent tab control. I started by basing my XAML off of this question and thus came up with this:
<TabControl x:Name="tabControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TabItem Header="Clipboard Buffer">
<ListView Name="clipboardListView" ScrollViewer.CanContentScroll="True">
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderThickness="2" BorderBrush="Black" CornerRadius="2,2,2,2">
<DockPanel Background="AliceBlue" Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}">
<TextBlock Text="{Binding Text}" DockPanel.Dock="Top" />
</DockPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</TabItem>
...
This almost works, however the dock panel always seems to be just a little bit wider than the space available in the tab control as you can see here.
I can use the scroll bar to move over and see the end of my dockpanel as one would expect...
However, if I attempt to re-size the form, the dockpanel remains slightly larger than the amount of space available in the tab control.
What am I missing here? How can I make my dock panel stay within the width of its parent tab control?

Try this:
<TabControl x:Name="tabControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TabItem Header="Clipboard Buffer">
<ListView Name="clipboardListView" ScrollViewer.CanContentScroll="True" HorizontalContentAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderThickness="2" BorderBrush="Black" CornerRadius="2,2,2,2" >
<DockPanel Background="AliceBlue" >
<TextBlock Text="asdfasdkfhkasdfkasdgfkjhdgfkuwegyfkwegfbkuweyfuksyadukfykweugbyfu" DockPanel.Dock="Top" />
</DockPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</TabItem>
</TabControl>
Note the HorizontalContentAlignment="Stretch" in the ListView

Your DockPanel is nested into a Border element:
<Border BorderThickness="2" BorderBrush="Black" CornerRadius="2,2,2,2">
<DockPanel Background="AliceBlue" Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}">
The Border occupies some width of its own - it has a border thickness of 2, so it is 4 pixels wider than its content.
The content of the Border is your DockPanel - and you have bound its width to the actual width of the enclosing TabControl. As a result, the aforementioned Border will always be a bit wider than the enclosing TabControl.
For a start, you could try and bind the width of the Border rather than that of the DockPanel. This should help to some extent, although I am not completely sure the TabControl doesn't require some extra inner space for its page contents.

It's most likely caused by this line in your DockPanel XAML:
Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}
Your setting the Width to the ActualWidth of the TabControl, without taking into account any Padding or Margin on the Children.
You need to check if the TabControl, TabItem or ListView have any padding or margins, then take this off too. (Don't forget the 2pixel border!)

ScrollView not working in Windows 10

I have a ViewModel with about 200 contacts and I am binding it to a ListView
<Grid>
<ScrollViewer
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<ListView x:Name="ContactListing" ItemsSource="{Binding ContactListing}" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=DisplayName}" />
<Image Source="{Binding Thumbnail,Converter={StaticResource ResourceKey=contactConv}}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollViewer>
</Grid>
Would be great if someone could explain the details behind the ScrollViewers visibility

A ListView control already contains a ScrollViewer and implements scrolling based on the amount of items, there is no need to wrap this control in another ScrollViewer. You can double check this in the default ControlTemplate of ListView at line 6219 in the generic.xaml file containing all Windows 10 styles:
C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic\generic.xaml
So you simply have to remove the ScrollViewer from your XAML fragment.
<Grid>
<ListView x:Name="ContactListing" ItemsSource="{Binding ContactListing}" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=DisplayName}" />
<Image Source="{Binding Thumbnail,Converter={StaticResource ResourceKey=contactConv}}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Note: As you're using a ListView, I suppose you want all your items stacked above each other. If you want multiple columns to show your items, use a GridView instead.

windows phone 8 listbox grid setting inner elements opacity to full

the problem with this code is that i have set the opacity of the grid to 0.5 and that make my grid box transparent(that is fine), but the problem is that the text and the image and the checkbox should be seen in full opacity. how can i make my grid transparent without affecting the inner elements?
tried:
i have make a stackpanel in the datatemplate and was trying to place it inside the grid with the margin property but the stackpanel cannot be made inside the listbox's datatemplate with grid. any solution to that
<ListBox Grid.Row="1" x:Name="BookCategories" ItemsSource="{Binding}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel ItemHeight="200" ItemWidth="200" Margin="10"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="#12161e" Opacity="0.5" Tap="Grid_Tap_1" Margin="10,-5,0,20" Height="200" Width="200">
<CheckBox Grid.Row="1" Margin="145,-15,-15,0" x:Name="Chkcategories" Click="Chkcategories_Click" >
<Image Margin="-80,-140,-15,0" Height="20" Width="20" Source="{Binding ElementName=Chkcategories, Path=IsChecked, Converter={StaticResource BoolToImageSource} }"></Image>
</CheckBox>
<Image Width="50" Opacity="100" Height="50" Margin="30,30,0,0" Source="Assets/icons/food.png"></Image>
<TextBlock Margin="40, 80, 0, 0" FontSize="22" Text="{Binding Path=CategoryName}"></TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

The Opacity setting is inherited for all child elements if set directly in the Grid Opacity=... setting. You should instead use opacity like this:
<Grid>
<Grid.Background>
<SolidColorBrush Color="#12161e" Opacity="0.5" />
</Grid.Background>
... content ...
</Grid>

You have to use alpha channel (0-255).
255 (max) * 0.5 (your opacity) = 127.5 => 128 => 80 hex
<Grid Background="#8012161e" ...