Develop Reference

How to position "Selection Box" with ItemContainerStyle of a ListView?

I've been reading this documentation and I was wondering if it's possible to position the selection check box of the container? Specifically, this thing here:
Ideally, I want it aligned on the right. So far I've tried to use
<ListView.ItemContainerStyle>
<Style TargetType="WHAT DO I WRITE HERE?">
<Setter Property="HorizontalAlignment" Value="Right"/>
</Style>
</ListView.ItemContainerStyle>
With various TargetTypes. Is it even possible to position that Selection-box?

To be honest you're looking in the wrong place. The ItemContainerStyle is adjust the margin padding and such properties of the container of the items of a listview.
What You need is a style for a ListViewItem. Lucky for us it's easily available from the ListViewItem styles and templates from the MSDN Documentation.
I won't paste the whole code here since, it's huge and it's cause deviated focus from the actual code that you need to tweak.
From the style from the above link, pick the second style of the two mentioned and refer to the below code:
<Border x:Name="MultiSelectSquare"
BorderBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
BorderThickness="2"
Width="20"
Height="20"
Margin="12,0,0,0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Visibility="Collapsed" >
<Border.Clip>
<RectangleGeometry Rect="0,0,20,20">
<RectangleGeometry.Transform>
<TranslateTransform x:Name="MultiSelectClipTransform"/>
</RectangleGeometry.Transform>
</RectangleGeometry>
</Border.Clip>
<Border.RenderTransform>
<TranslateTransform x:Name="MultiSelectCheckBoxTransform"/>
</Border.RenderTransform>
<FontIcon x:Name="MultiSelectCheck"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
Glyph=""
FontSize="16"
Foreground="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
Visibility="Collapsed"
Opacity="0"/>
</Border>
The above code handles the checkbox kinda tick mark with border for SelectionMode="Multiple".
All the changes you want to do must be done in this style and the above code section of the style.
Please Note: I would advise not to play around with Visibility and Opacity property as they are modified using VisualStates. Don't worry about them they'll change states at runtime.

XAML: correct way of accessing buttons embedded inside of a datagrid and changing properties programatically

so for example i have this xaml code
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid Width="50" Height="50" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button x:Name="PlayButton" Style="{DynamicResource MetroCircleButtonStyle}" Visibility="Visible"
Width="50" Height="50" HorizontalAlignment="Center"
VerticalAlignment="Center" Click="OnPlayButtonClicked"
d:DataContext="{d:DesignInstance local:MainWindow}">
<Rectangle Width="20"
Height="20">
<!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>-->
<Rectangle.Fill>
<VisualBrush Stretch="Fill"
Visual="{StaticResource appbar_control_play}" />
</Rectangle.Fill>
</Rectangle>
<!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>-->
</Button>
<Button x:Name="PauseButton" Style="{DynamicResource MetroCircleButtonStyle}" Visibility="Hidden"
Width="50" Height="50" HorizontalAlignment="Center"
VerticalAlignment="Center" Click="OnPauseButtonClicked"
d:DataContext="{d:DesignInstance local:MainWindow}">
<Rectangle Width="20"
Height="20">
<!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>-->
<Rectangle.Fill>
<VisualBrush Stretch="Fill"
Visual="{StaticResource appbar_control_pause}" />
</Rectangle.Fill>
</Rectangle>
<!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>-->
</Button>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
and inside my MainWindow.xaml.cs file i would like to edit the 'PlayButton' Visibility, but i can't seem to access it?
What is the correct way of accessing components like this?
Kind Regards - Corey.

The "PlayButton" resides inside a DataTemplate for the DataGridTemplateColumn.CellTemplate, which means that you will see one "PlayButton" for each row of the table.
So, the window can't have a "PlayButton" property to access the button, since there are many instances of it.
Usually if you have to control the Visibility of that button, you will have to do it by Binding.
In addition, since the DataGrid uses by default EnableColumnVirtualization and EnableRowVirtualization, a single instance of the button can be reused when you scroll the grid elements, so the button has to be able to match the cell content only by using the data present in that row.
For example if the grid displays 10 rows, when you scroll down by one row, the visual components used to show the first row, which goes out of sight, will be reused to show the eleventh row. So any change you could have made to the PlayButton of the first row, will remain in the eleventh one, unless you change it again.
Another advice I can give you is to not use a Grid, if you can, inside a celltemplate of a column because the Grid is quite heavy to render, and assuming that the grid could show at the same time dozens of rows, the redering could be very slow.
I think that in this case it could be better to use a CellTemplateSelector to show only a PlayButton or a PauseButton, each one on its own DataTemplate, basing on the content of the row, or to use a single button with a Style responding to DataTriggers that changes the appearance of the button itself.

You'd use a DataTrigger to toggle visibility :
<Button x:Name="PauseButton" ...>
<Button.Style>
<Style TargetType="{x:Type Button}">
<!-- Set Default Value here, not in Button Tag -->
<Setter Property="Visibility" Value="Collapsed" />
<!-- Use Trigger to update value based on a conditional statement -->
<Style.Triggers>
<DataTrigger Binding="{Binding IsVisible}" Value="True">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
...
</Button>
Formentz's answer is correct that the actual Button object is hard to use because it is not individually created for each row. Instead, only the visible rows are created, and the .DataContext behind each row changes as you scroll through. If you want to toggle the Visibility of the button, it needs to be based off a databound property so it updates as users scroll through the rows.

Change Highlighted Textbox to transparent borderbrush C# WPF

Okay. I have tried almost every solution here in StackOverflow and still I cannot find the answer. This is what I want it to look like versus what it looks like. I cheated the textbox by doing this:
<Border Margin="100,20,100,20" BorderThickness="1.5" CornerRadius="20,20,20,20" Background="#F7F7F7" BorderBrush="#CAC9CC" Height="32">
<Grid>
<TextBlock x:Name="TextBlockUsername" Text="username" Margin="10,5,0,0" FontWeight="Light"/>
<TextBox Margin="8,5,8,5" Background="Transparent" BorderBrush="Transparent" TextChanged="TextBoxUsername_TextChanged" SelectionBrush="Transparent"/>
</Grid>
</Border>
But apparently that Selection Border Brush just destroys the illusion. Any ideas on how to make it transparent?
Here are some photos:

Try to set BorderThickness="0" for your TextBox:
<TextBox Margin="8,5,8,5" Background="Transparent" BorderThickness="0" TextChanged="TextBoxUsername_TextChanged" />

How to make toolbar buttons share same width?

I have a toolbar
Code:
<ToolBarTray>
<ToolBar>
<Button>
<StackPanel>
<Image/>
<Label/>
</StackPanel>
</Button>
<Button>
<StackPanel>
<Image/>
<Label/>
</StackPanel>
</Button>
<Button>
<StackPanel>
<Image/>
<Label/>
</StackPanel>
</Button>
</ToolBar>
</ToolBarTray>
On Image I only set the Source and on the Label I only set the Content.
However as the image shows, the buttons aren't sharing the same width. "Remove" button is wider than the others.
How can I make it so that all toolbar buttons will share the same width as the "Remove" button?

One way you could set the Width of all of your buttons at the same time, is to use a Setter in your ToolBar.Resources, like so:
<ToolBar>
<ToolBar.Resources>
<Style x:Key="{x:Static ToolBar.ButtonStyleKey}" TargetType="Button">
<Setter Property="Width" Value="80"/>
</Style>
</ToolBar.Resources>
<Button>
...
<Button>
...
</ToolBar>
That way you don't need to manually set the width on each Button individually.
You could also use a Setter to set the Stretch property, like so:
<Setter Property="Stretch" Value="None"/>
Edit:
Apparently, according to https://stackoverflow.com/a/2406213/3101082, you need to ensure that you are setting the Style using the x:Key="{x:Static ToolBar.ButtonStyleKey}" in order for it to apply to ToolBar buttons. I have updated my answer to reflect this.

This will likely work, I haven't tested it but by specifying the width of the button and the image scaling, you should find it does the trick.
<Button Width="intValue">
<StackPanel>
<Image Source="yourImage"
RenderOptions.BitmapScalingMode="Fant" />
<Label/>
</StackPanel>
</Button>

One-sided rounded buttons in Silverlight

I want to make a collection of buttons in silverlight.
They are in a collection that goes from left to right and the buttons are lined up so that they are touching on the left and right sides.
Here is the rub:
The collection has rounded corners but the buttons in between the end buttons in the collection do not have rounded ends. So basically, for the buttons on the far left and right side of the collection, they have to be somewhat special because they have to have one flat vertical side and one rounded side. Is this possible to do in silverlight without resorting to making a special bitmap for the end buttons?
One idea I have is somehow declare a canvas with a bitmap background and then have overlapping ellipse and rectangle
<Canvas Height="100" HorizontalAlignment="Left" Margin="189,381,0,0" VerticalAlignment="Top" Width="200" Background="Black">
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Stroke="Black" Width="58" Height="61" Canvas.Left="7" Canvas.Top="16" />
<Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Stroke="White" Width="65" StrokeThickness="0" Height="59" Canvas.Left="31" Canvas.Top="17" />
</Canvas>

Here is a simple example of the effect you are trying to achieve that utilizes custom ControlTemplate to skin the buttons in three ways:
<Grid HorizontalAlignment="Center">
<Grid.Resources>
<Style x:Key="ButtonLeftStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="DarkGray" CornerRadius="10,0,0,10">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonCenterStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="DarkGray" CornerRadius="0,0,0,0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonRightStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="DarkGray" CornerRadius="0,10,10,0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<StackPanel Orientation="Horizontal">
<Button Width="75" Height="25" Style="{StaticResource ButtonLeftStyle}" Content="Left"/>
<Rectangle Width="2"/>
<Button Width="75" Height="25" Style="{StaticResource ButtonCenterStyle}" Content="Center"/>
<Rectangle Width="2"/>
<Button Width="75" Height="25" Style="{StaticResource ButtonRightStyle}" Content="Right"/>
</StackPanel>
</Grid>
And this looks like:
There's a lot more you can do here but this shows an approach you can use. Here's a great blog article with more information and examples of this technique:
Silverlight Tutorial Part 7: Using Control Templates to Customize a Control's Look and Feel

I solved the problem by using a visual trick. First of all, my trick required I placed the buttons on an image that would represent the background. The buttons were somewhat transparent so the color of this background came through
The buttons in the middle be simple rectangle canvas classes. While the end buttons had rounded ends.
The middle buttons were in front of the buttons on the end and they overlapped them.
The buttons were transparent and so normally it would not work because you would be able to see the end buttons edges behind the middle buttons. I solved this by putting a rectangle filled with the color of the background image "between" (think in 3D layered depth terms) the end buttons and the rectangle shapped buttons in front of it. The colored rectangles only were positioned in front of the end buttons that were behind the rectangle buttons in front of them.
This was kind of a hack but it worked. When I have time, I will try the solutions suggested here.

Yeah, even simpler, based on Rick'S, as you just want to use the styles to address the rounded corners of your button template border:
<Grid HorizontalAlignment="Center">
<Grid.Resources>
<!-- Default Template -->
<ControlTemplate TargetType="Button">
<Border x:Name="Border" Background="DarkGray" CornerRadius="0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
<!-- Custom Styles for edges -->
<Style x:Key="ButtonLeftStyle" TargetType="Button">
<Setter Property="CornerRadius" Value="10,0,0,10" TargetName="Border"/>
</Style>
<Style x:Key="ButtonRightStyle" TargetType="Button">
<Setter Property="CornerRadius" Value="0,10,10,0" TargetName="Border"/>
</Style>
</Grid.Resources>
<StackPanel Orientation="Horizontal">
<Button Width="75" Height="25" Style="{StaticResource ButtonLeftStyle}" Content="Left"/>
<Rectangle Width="2"/>
<Button Width="75" Height="25" Content="Center"/>
<Rectangle Width="2"/>
<Button Width="75" Height="25" Style="{StaticResource ButtonRightStyle}" Content="Right"/>
</StackPanel>