Rotate sliders WPF - c#

I would like to rotate 4 sliders in WPF to create a custom control.
Here is my code :
<Grid Margin="20">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Slider Name="Slider_Top_Left" Minimum="0" Maximum="100" Value="75" RenderTransformOrigin="0,0">
<Slider.LayoutTransform>
<RotateTransform CenterX="0" CenterY="0" Angle="-135"/>
</Slider.LayoutTransform>
</Slider>
<Slider Name="Slider_Top_Right" Grid.Column="1" Minimum="0" Maximum="100" Value="75">
<Slider.LayoutTransform>
<RotateTransform CenterX="0" CenterY="0" Angle="-45"/>
</Slider.LayoutTransform>
</Slider>
<Slider Name="Slider_Bottom_Right" Grid.Column="1" Grid.Row="1" Minimum="0" Maximum="100" Value="75">
<Slider.LayoutTransform>
<RotateTransform CenterX="0" CenterY="0" Angle="45"/>
</Slider.LayoutTransform>
</Slider>
<Slider Name="Slider_Bottom_Left" Grid.Column="0" Grid.Row="1" Minimum="0" Maximum="100" Value="75">
<Slider.LayoutTransform>
<RotateTransform CenterX="-10" CenterY="-10" Angle="135"/>
</Slider.LayoutTransform>
</Slider>
</Grid>
The result :
What I want :
I've tried without the grid definitions, with different centers (it didn't change anything).
I've followed the online help for layout transform but I can't make it work.
Thank you for your help.

Put Sliders in Grid properly and Rotate the Grid. If you decide later to add more elements to custom control, where will be no need to calculate any rotation angles/centers for them
<Grid Grid.Row="3">
<Grid.LayoutTransform>
<RotateTransform Angle="45"/>
</Grid.LayoutTransform>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!--top right-->
<Slider Orientation="Vertical" Grid.ColumnSpan="2" HorizontalAlignment="Center">
<Slider.LayoutTransform>
<ScaleTransform ScaleY="-1"/>
</Slider.LayoutTransform>
</Slider>
<!--bottom left-->
<Slider Orientation="Vertical" Grid.Row="1"
Grid.ColumnSpan="2"
HorizontalAlignment="Center"/>
<!--top left-->
<Slider Grid.RowSpan="2" VerticalAlignment="Center"/>
<!--bottom right-->
<Slider Grid.Column="1" Grid.RowSpan="2" VerticalAlignment="Center">
<Slider.LayoutTransform>
<ScaleTransform ScaleX="-1"/>
</Slider.LayoutTransform>
</Slider>
</Grid>

This is how I did it:
<Grid>
<Slider x:Name="slider" HorizontalAlignment="Center" Margin="-50,50,0,0" VerticalAlignment="Center" Width="75">
<Slider.LayoutTransform>
<RotateTransform CenterX="0" CenterY="0" Angle="-45"/>
</Slider.LayoutTransform>
</Slider>
<Slider x:Name="slider1" HorizontalAlignment="Center" Margin="50,50,0,0" VerticalAlignment="Center" Width="75">
<Slider.LayoutTransform>
<RotateTransform CenterX="0" CenterY="0" Angle="-135"/>
</Slider.LayoutTransform>
</Slider>
<Slider x:Name="slider5" HorizontalAlignment="Center" Margin="50,-50,0,0" VerticalAlignment="Center" Width="75">
<Slider.LayoutTransform>
<RotateTransform CenterX="0" CenterY="0" Angle="135"/>
</Slider.LayoutTransform>
</Slider>
<Slider x:Name="slider3" HorizontalAlignment="Center" Margin="-50,-50,0,0" VerticalAlignment="Center" Width="75">
<Slider.LayoutTransform>
<RotateTransform CenterX="0" CenterY="0" Angle="45"/>
</Slider.LayoutTransform>
</Slider>
</Grid>

I am not really sure what you want to achieve but still on based of image you have provided I am posting my code :
<Slider VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
<Slider.RenderTransform>
<TransformGroup>
<RotateTransform Angle="45"/>
</TransformGroup>
</Slider.RenderTransform>
</Slider>
Use angles of 45,-45,135,-135 to layout them as per your posted design.
A small tip : Next time you find any such issue, Go to properties of that control and look for all available properties.
Happy coding !!

Related

WPF Dockpanel width Stretch in xaml

I have a toolbox and want to make fill. But I dont make to this. İt is simple problem, I know that because I tried very hard but it did not.
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="1" Grid.Row="0">
<DockPanel Height="40" HorizontalAlignment="Stretch" Background="#eaeaea" LastChildFill="True">
<StackPanel HorizontalAlignment="Stretch" DockPanel.Dock="Left" Orientation="Vertical">
<Border BorderThickness="1" BorderBrush="#eaeaea" CornerRadius="10" Padding="2" VerticalAlignment="Stretch" >
<Grid Width="auto" HorizontalAlignment="Stretch" >
<Border Name="mask" Background="#eaeaea" CornerRadius="6,0,0,6" HorizontalAlignment="Stretch" />
<StackPanel Height="30" Margin="2,2,2,2" Name="kucukmenu" HorizontalAlignment="Stretch" Width="auto">
<StackPanel.OpacityMask>
<VisualBrush Visual="{Binding ElementName=mask}"/>
</StackPanel.OpacityMask>
</StackPanel>
</Grid>
</Border>
</StackPanel>
<StackPanel Height="40" Orientation="Horizontal" HorizontalAlignment="Right" DockPanel.Dock="Right">
<Button Style="{DynamicResource systembtn}">
<Image Source="images/icons/settings.png" HorizontalAlignment="Right"/>
</Button>
<Button Style="{DynamicResource systembtn}">
<Image Source="images/icons/minimize.png" HorizontalAlignment="Right" />
</Button>
<Button Style="{DynamicResource systembtn}">
<Image Source="images/icons/cancel.png" HorizontalAlignment="Right"/>
</Button>
</StackPanel>
</DockPanel>
</StackPanel>
Now it looks like this
I want to this
You can simply use Grid with ColumnDefinitions
Width="*" means fills as much as area an item can, this is for your blue area
Width="Auto" means only fills area an item need so this is for your buttons
You can find more information by searching xaml grid
<Grid Height="40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<DockPanel Grid.Column="0" Width="100">
<StackPanel HorizontalAlignment="Stretch" DockPanel.Dock="Left" Orientation="Vertical">
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" CenterX="0.5" />
<SkewTransform CenterY="0.5" CenterX="0.5" />
<RotateTransform Angle="90" CenterY="0.5" CenterX="0.5" />
<TranslateTransform />
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FFBFC5E2" Offset="0" />
<GradientStop Color="#FF123CF5" Offset="1" />
</LinearGradientBrush>
</StackPanel.Background>
</StackPanel>
</DockPanel>
<Button Grid.Column="1" Content="btn 1" />
<Button Grid.Column="2" Content="btn 2" />
<Button Grid.Column="3" Content="btn 3" />
</Grid>
If you need more complex things to do, you can use this package https://github.com/sourcechord/GridExtra

WPF Buttons disappear on 55" screen

I developed a wpf-app with C# in Visual Studio 2017.
When deploying the software on the target devices (55" NEC Touchscreens, Resolution 1920x1080) the buttons I designed will disappear when the app launches, while the rest of the MainWindow stays in place. I set in <Window> tag Height="1080" Width="1920". When testing the software on my 1920x1080 screen on my desktop (22") the buttons were in place.
<Button Style="{StaticResource FlatButtonStyle}" Click="QuickGuide_Click" Name="QuickGuide" Background="#253135" Margin="375,531,1362,375">
<TextBlock Text="Quick Guide" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="xyz" FontSize="12" Margin="0,59,0,58"/>
</Button>
I have four Buttons, all with just different positions.
This is the whole XAML:
<Window x:Class="Startup.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Prometheus" Height="1080" Width="1920"
WindowState="Maximized"
WindowStyle="None" ResizeMode="NoResize"
WindowStartupLocation="CenterScreen"
>
<Window.Background>
<ImageBrush ImageSource="Resource/background_img.png"></ImageBrush>
</Window.Background>
<Grid Margin="12">
<Grid Margin="10,4,-10,361" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="Start" HorizontalAlignment="Right" Margin="0,10,0,0" VerticalAlignment="Top" Width="101" RenderTransformOrigin="-0.013,0.15" Name="GetEventsBtn" Click="GetEvents" Height="34" IsDefault="True" TabIndex="2" Visibility="Hidden" />
<TextBlock HorizontalAlignment="Left" Margin="76,68,0,0" TextWrapping="Wrap" Text="Hi" VerticalAlignment="Top" FontFamily="" Height="60" Width="613" Foreground="#FFE0D2D2" FontSize="48"/>
<TextBlock HorizontalAlignment="Left" Margin="76,133,0,0" TextWrapping="Wrap" Text="Please choose one option below to get started quickly." VerticalAlignment="Top" FontFamily="" Height="46" Width="499" Foreground="#FFE0D2D2" FontSize="20"/>
</Grid>
<Button Style="{StaticResource FlatButtonStyle}" Click="QuickGuide_Click" Name="QuickGuide" Background="#253135" Margin="375,531,1362,375">
<TextBlock Text="Quick Guide" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12" Margin="0,59,0,58"/>
</Button>
<Button Style="{StaticResource FlatButtonStyle}" Click="PlanAMeeting_Click" Name="PlanAMeeting" Margin="170,531,1576,375">
<TextBlock Grid.Row="1" Text="Plan a meeting" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12"></TextBlock>
</Button>
<Button Style="{StaticResource FlatButtonStyle}" Click="CreateAMeeting_Click" Name="CreateAMeeting" Margin="375,319,1362,587">
<TextBlock Grid.Row="1" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12"> Create a new <LineBreak></LineBreak> meeting for now</TextBlock>
</Button>
<Button Style="{StaticResource FlatButtonStyle}" Click="StartAMeeting_Click" Name="StartAMeeting" Margin="170,319,1576,587">
<TextBlock Grid.Row="1" TextWrapping="Wrap" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12">Start a scheduled<LineBreak></LineBreak> meeting</TextBlock>
</Button>
<Grid MaxHeight="200" MaxWidth="600" Margin="1147,-306,39,306" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions >
<RowDefinition Height="60" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<TextBlock Name="GR1Z1" Foreground="White" FontSize="16" FontWeight="Bold" Grid.Row="1" Text="Please wait while loading..."></TextBlock>
<TextBlock Name="GR1Z2" Foreground="White" Grid.Row="2"></TextBlock>
<TextBlock Name="GR1Z3" Foreground="White" Grid.Row="3"></TextBlock>
<TextBlock Name="GR1Z4" Foreground="White" Grid.Row="4"></TextBlock>
<TextBlock Name="GR1Z5" Foreground="White" Grid.Row="5"></TextBlock>
</Grid>
<Grid MaxHeight="200" MaxWidth="600" Margin="1147,96,39,306">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<TextBlock Name="GR2Z1" Grid.Row="1" Foreground="White" FontSize="16" FontWeight="Bold"></TextBlock>
<TextBlock Name="GR2Z2" Grid.Row="2" Foreground="White"></TextBlock>
<TextBlock Name="GR2Z3" Grid.Row="3" Foreground="White"></TextBlock>
<TextBlock Name="GR2Z4" Grid.Row="4" Foreground="White"></TextBlock>
<TextBlock Name="GR2Z5" Grid.Row="5" Foreground="White"></TextBlock>
</Grid>
</Grid>
and the style
<Style TargetType="Button" x:Key="FlatButtonStyle">
<Setter Property="Background" Value="#253135"/>
<Setter Property="Foreground" Value="#253135"/>
<Setter Property="Width" Value="150"/>
<Setter Property="Height" Value="150"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderThickness="0"
Background="{TemplateBinding Background}"
CornerRadius="12"
Name="Border">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border" Property="Background" Value="White" />
<Setter TargetName="Border" Property="BorderBrush" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This is just to give you the idea:
I removed all Margin properties, in order to not use an absolute position, but relative positions if you want to achieve a dynamic layout.
I put your left part of the layout into a grid with three rows where the first two are for your headers text, and the last one for the buttons.
In the last row I put another grid with two rows and two columns where each cell contains a buttons
This part of markup corresponds to the next grid after your: <Grid Margin="12">:
<Grid HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="48"
Foreground="#FFE0D2D2"
Text="Hi"
TextWrapping="Wrap" />
<TextBlock
Grid.Row="1"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="20"
Foreground="#FFE0D2D2"
Text="Please choose one option below to get started quickly."
TextWrapping="Wrap" />
<Grid Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button
Name="QuickGuide"
Grid.Row="0"
Grid.Column="0"
Background="#253135"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
Text="Quick Guide"
TextAlignment="Center" />
</Button>
<Button
Name="PlanAMeeting"
Grid.Row="1"
Grid.Column="1"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
Text="Plan a meeting"
TextAlignment="Center" />
</Button>
<Button
Name="StartAMeeting"
Grid.Row="1"
Grid.Column="0"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
TextAlignment="Center"
TextWrapping="Wrap">
Start a scheduled
<LineBreak />
meeting
</TextBlock>
</Button>
<Button
Name="CreateAMeeting"
Grid.Row="0"
Grid.Column="1"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
TextAlignment="Center">
Create a new
<LineBreak />
meeting for now
</TextBlock>
</Button>
</Grid>
</Grid>

How do I keep Richtext box from expanding?

I have a RichTextBox inside my application, and as I add text to it, the text box expands vertically. I want it to dynamically size if the application is stretched, but not expand if text is added to it.
Here is my ALL of my xaml code:
<Grid Background="#FF1F1F1F">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderThickness="1" Padding="5" Margin="10,10,10,0" BorderBrush="#FF878383" CornerRadius="10">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="#FF323232" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Grid UseLayoutRounding="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Label Content="Server: " VerticalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalAlignment="Left" Padding="0" Margin="3" Foreground="White" />
<Label x:Name="ServerIDLabel" Content="" VerticalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalAlignment="Left" Padding="0" Margin="3" Foreground="White" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="Port: " VerticalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalAlignment="Left" Padding="0" Margin="3" Foreground="White" />
<Label Name="txtPort" Content="10037" VerticalAlignment="Center" Width="60" HorizontalAlignment="Center" Margin="3" Foreground="White" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="IP:" VerticalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalAlignment="Left" Padding="0" Margin="3" Foreground="White" />
<Label Name="IPAddress" Content="255.255.255.255" VerticalAlignment="Center" Margin="3" Foreground="White" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="Version:" VerticalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalAlignment="Left" Padding="0" Margin="3" Foreground="White" />
<Label Name="lblVersionNumber" Content="3.0.0.0" VerticalAlignment="Center" Margin="3" Foreground="White" />
</StackPanel>
</StackPanel>
<Border Grid.Column="1" BorderThickness="1" Padding="5" BorderBrush="#FF878383" CornerRadius="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="ManagerNoticeLabel" Text="Notifications:" TextWrapping="Wrap" Foreground="White" />
<Button Margin="25,0" x:Name="ClearManagerNotifications" Content="Clear" Click="ClearManagerNotifications_Click" />
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<DockPanel >
<RichTextBox Name="ManagerNotice" Background="#FF343434" Foreground="#FFDEDEDE" >
<RichTextBox.Resources>
<Style TargetType="{x:Type Paragraph}">
<Setter Property="Margin" Value="0"/>
</Style>
</RichTextBox.Resources>
</RichTextBox>
</DockPanel>
</Grid>
</Grid>
</Border>
<StackPanel Orientation="Vertical" Grid.Column="2" >
<Button Name="btnStartServer" Content="Start" VerticalAlignment="Center" Margin="10" Click="btnStartServer_Click"></Button>
<Button Name="btnStopServer" Content="Stop" VerticalAlignment="Center" Margin="10" Click="btnStopServer_Click" IsEnabled="False" />
</StackPanel>
</Grid>
</Border>
<my:VersionDisplayControl Grid.Row="1" x:Name="versionDisplayControl" Margin="10,10,10,0" />
<my:AgentActionsControl Grid.Row="2" x:Name="agentActionsControl" Margin="10,10,10,0" />
<Border Grid.Row="3" BorderThickness="1" Padding="5" Margin="10" BorderBrush="#FF878383" CornerRadius="10">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="#FF323232" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="28"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" Margin="0,0,5,0" x:Name="Summary_Agents">
<Label x:Name="AgentsLabel" Content="Agents:" Foreground="Lime" FontWeight="Normal" FontSize="13" FontStyle="Normal" FontStretch="Normal" />
<Label Content="0" x:Name="lblAgentCount" Foreground="Lime" FontWeight="Normal" FontSize="13" FontStyle="Normal" FontStretch="Normal" />
<Label x:Name="OfLabel" Content="of" Foreground="Lime" FontWeight="Normal" FontSize="13" FontStyle="Normal" FontStretch="Normal" />
<Label Content="0" x:Name="lblMaxAgentCount" Foreground="Lime" FontWeight="Normal" FontSize="13" FontStyle="Normal" FontStretch="Normal" />
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Horizontal" Margin="5,0" x:Name="Summary_HardwareInventory" >
<Label x:Name="HdInvLabel" Content="Hard Inv" Foreground="Lime" FontWeight="Normal" FontSize="13" FontStyle="Normal" FontStretch="Normal" />
<Label Content="0" x:Name="lblHdInvCount" Foreground="Lime" FontWeight="Normal" FontSize="13" FontStyle="Normal" FontStretch="Normal" />
<Label x:Name="OfHdInvLabel" Content="of" Foreground="Lime" FontWeight="Normal" FontSize="13" FontStyle="Normal" FontStretch="Normal" />
<Label Content="0" x:Name="lblHdInvCountMax" Foreground="Lime" FontWeight="Normal" FontSize="13" FontStyle="Normal" FontStretch="Normal" />
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Horizontal" Margin="5,0" x:Name="Summary_SoftwareInventory" >
<Label x:Name="SfInvLabel" Content="Soft Inv" Foreground="Lime" FontWeight="Normal" FontSize="13" FontStyle="Normal" FontStretch="Normal" />
<Label Content="0" x:Name="lblSfInvCount" Foreground="Lime" FontWeight="Normal" FontSize="13" FontStyle="Normal" FontStretch="Normal" />
<Label x:Name="OfSfInvLabel" Content="of" Foreground="Lime" FontWeight="Normal" FontSize="13" FontStyle="Normal" FontStretch="Normal" />
<Label Content="0" x:Name="lblSfInvCountMax" Foreground="Lime" FontWeight="Normal" FontSize="13" FontStyle="Normal" FontStretch="Normal" />
</StackPanel>
<StackPanel Grid.Column="3" Orientation="Horizontal" Margin="5,0" x:Name="Summary_E2P">
<Label x:Name="E2InvLabel" Content="E2P" Foreground="Lime" FontWeight="Normal" FontSize="13" FontStyle="Normal" FontStretch="Normal" />
<Label Content="0" x:Name="lblE2InvCount" Foreground="Lime" FontWeight="Normal" FontSize="13" FontStyle="Normal" FontStretch="Normal" />
<Label x:Name="OfE2InvLabel" Content="of" Foreground="Lime" FontWeight="Normal" FontSize="13" FontStyle="Normal" FontStretch="Normal" />
<Label Content="0" x:Name="lblE2InvCountMax" Foreground="Lime" FontWeight="Normal" FontSize="13" FontStyle="Normal" FontStretch="Normal" />
</StackPanel>
</Grid>
<!-- a grid -->
<Grid Grid.Row="1">
<ScrollViewer VerticalScrollBarVisibility="Auto" CanContentScroll="True" >
<StackPanel Name="spAgents" />
</ScrollViewer>
</Grid>
</Grid>
</Grid>
</Border>
</Grid>
Thanks
I changed it to a DockPanel and it still sizes up when adding text ( see above )
Here is another project where it does NOT grow with additional text added:
<Border Grid.Column="0" Margin="5,5,0,5">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" >
<RichTextBox Name="txtMessageHistory" Margin="5" Background="#FF343434" Foreground="#FFDEDEDE" VerticalScrollBarVisibility="Visible">
<RichTextBox.Resources>
<Style TargetType="{x:Type Paragraph}">
<Setter Property="Margin" Value="0"/>
</Style>
</RichTextBox.Resources>
</RichTextBox>
</DockPanel>
<StackPanel Grid.Row="1" Orientation="Vertical">
<TextBox x:Name="ChatTextBox" Background="#FFDEDEDE" Foreground="Black" Margin="5,5,5,5" />
<StackPanel Orientation="Horizontal">
<Button x:Name="SendMsg" Content="Send msg " Click="btnSendMessage_Click" Margin="0,0,5,0"/>
<Button x:Name="ClearMessages" Content="Clear messages" Click="ClearMessages_Click" Margin="0,0,5,0"/>
<Button x:Name="SendMsg_Ping" Content="Send Ping" Click="SendMsg_Ping_Click" Margin="0,0,5,0" />
<Button x:Name="SendMsg_E2PRequest" Content="Send E2P Request" Click="SendMsg_E2PRequest_Click" Margin="0,0,5,0"/>
<Button x:Name="SendMsg_MARequest" Content="Send Mon App Request" Click="SendMsg_MARequest_Click" Margin="0,0,5,0"/>
<Button x:Name="SendMsg_PluginStatusRequest" Content="Send Plugin stat Request" Click="SendMsg_PluginStatusRequest_Click" Margin="0,0,5,0"/>
</StackPanel>
</StackPanel>
</Grid>
</Border>
Another try:
Removed Grid and Dockpanel - still grows in size:
<Border Grid.Column="1" BorderThickness="1" Padding="5" BorderBrush="#FF878383" CornerRadius="10">
<Grid>
<RichTextBox Name="ManagerNotice" Background="#FF343434" Foreground="#FFDEDEDE" >
<RichTextBox.Resources>
<Style TargetType="{x:Type Paragraph}">
<Setter Property="Margin" Value="0"/>
</Style>
</RichTextBox.Resources>
</RichTextBox>
</Grid>
</Border>
Attempt (last and this is working)
When I explicitly set the height to some number, it behaves
<DockPanel Grid.Row="1" >
<RichTextBox Height="100" Name="ManagerNotice" Margin="5" Background="#FF343434" Foreground="#FFDEDEDE" VerticalScrollBarVisibility="Visible">
<RichTextBox.Resources>
<Style TargetType="{x:Type Paragraph}">
<Setter Property="Margin" Value="0"/>
</Style>
</RichTextBox.Resources>
</RichTextBox>
</DockPanel>
Here is the answer, after multiple comments and great feedback:
<DockPanel Grid.Row="1" >
<RichTextBox Height="100" Name="ManagerNotice" Margin="5" Background="#FF343434" Foreground="#FFDEDEDE" VerticalScrollBarVisibility="Visible">
<RichTextBox.Resources>
<Style TargetType="{x:Type Paragraph}">
<Setter Property="Margin" Value="0"/>
</Style>
</RichTextBox.Resources>
</RichTextBox>
</DockPanel>

LayoutTransform on certain elements in canvas?

I want a layout transform on a canvas, but I only want certain items to be affected. For instance, if I have a canvas with an image and some other control used for a particular function, I only want the image to be transformed when the values change and the other control to remain the same.
<Canvas x:Name="canvas1">
<Canvas.LayoutTransform>
<TransformGroup>
<ScaleTransform x:Name="scaleTransform1" ScaleX="{Binding ElementName=slider1, Path=Value}" ScaleY="{Binding ElementName=slider1, Path=Value}" CenterX="0" CenterY="0"/>
</TransformGroup>
</Canvas.LayoutTransform>
<Border x:Name="border1" Cursor="SizeAll" Panel.ZIndex="1000" Visibility="Hidden" Background="Transparent" BorderThickness="1"/>
<Image x:Name="image1" RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin="0.5, 0.5" Stretch="Fill"/>
</Canvas>
<Slider x:Name="zoomSlider" ValueChanged="zoomSlider_ValueChanged" Value="1" Minimum="0.05" Maximum="5" IsSnapToTickEnabled="True" LargeChange=".05" TickFrequency="0.05" SmallChange="0.05"/>
And then we have:
private void zoomSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
TransformGroup g = new TransformGroup();
g.Children.Add(new ScaleTransform(this.zoomSlider.Value, this.zoomSlider.Value));
g.Children.Add(new TranslateTransform(0, 0));
this.canvas1.LayoutTransform = g;
}
Obviously all elements are going to be affected, but I was wondering if there's a way to specify which ones are not to be? It's absolutely important that this control remain in the canvas (as its purpose requires this).
You need to move LayoutTransform from Canvas to Image and also you don't need to handle ValueChanged for slider. Just fix binding to use proper ElementName. Change from slider1 to zoomSlider and binding will handle rest
<Canvas x:Name="canvas1">
<Border x:Name="border1" Cursor="SizeAll" Panel.ZIndex="1000" Visibility="Hidden" Background="Transparent" BorderThickness="1"/>
<Image x:Name="image1" RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin="0.5, 0.5" Stretch="Fill">
<Image.LayoutTransform>
<ScaleTransform ScaleX="{Binding ElementName=zoomSlider, Path=Value}" ScaleY="{Binding ElementName=zoomSlider, Path=Value}" CenterX="0" CenterY="0"/>
</Image.LayoutTransform>
</Image>
</Canvas>
<Slider x:Name="zoomSlider" Value="1" Minimum="0.05" Maximum="5" IsSnapToTickEnabled="True" LargeChange=".05" TickFrequency="0.05" SmallChange="0.05"/>
You can also make it to automatically apply to all Image controls in your Canvas by creating implicit Style
<Canvas x:Name="canvas1">
<Canvas.Resources>
<Style TargetType="{x:Type Image}">
<Setter Property="LayoutTransform">
<Setter.Value>
<ScaleTransform ScaleX="{Binding ElementName=zoomSlider, Path=Value}" ScaleY="{Binding ElementName=zoomSlider, Path=Value}"/>
</Setter.Value>
</Setter>
</Style>
</Canvas.Resources>
<Border x:Name="border1" Cursor="SizeAll" Panel.ZIndex="1000" Visibility="Hidden" Background="Transparent" BorderThickness="1"/>
<Image x:Name="image1" RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin="0.5, 0.5" Stretch="Fill"/>
</Canvas>
<Slider x:Name="zoomSlider" Value="1" Minimum="0.05" Maximum="5" IsSnapToTickEnabled="True" LargeChange=".05" TickFrequency="0.05" SmallChange="0.05"/>
Please try this code.It works.I hope this is what you want
Here is code:
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid x:Name="canvas1">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="scaleTransform1" ScaleX="{Binding ElementName=slider1, Path=Value}" ScaleY="{Binding ElementName=slider1, Path=Value}" CenterX="0" CenterY="0"/>
</TransformGroup>
</Grid.RenderTransform>
<Image Source="super.jpg" x:Name="image1" RenderTransformOrigin="0.5, 0.5" Stretch="None"/>
</Grid>
<Slider Grid.Row="1" VerticalAlignment="Center" Margin="0,20,0,0" Width="200" x:Name="zoomSlider" ValueChanged="zoomSlider_ValueChanged" Value="1" Minimum="0.05" Maximum="5" IsSnapToTickEnabled="True" LargeChange=".05" TickFrequency="0.05" SmallChange="0.05"/>
</Grid>
</Grid>
Codebehind:
private void zoomSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
TransformGroup g = new TransformGroup();
g.Children.Add(new ScaleTransform(this.zoomSlider.Value, this.zoomSlider.Value));
g.Children.Add(new TranslateTransform(0, 0));
this.canvas1.LayoutTransform = g;
}

Get thumb position of slider from XAML / Slider Template

How to get the slider's thumb position within the Style? I want to show the actual value at the position of the thumb. This would be possible by changing the width of the following textblock accordingly to the value. But how to get the position of the thumb?
<TextBlock Grid.Column="0" Width="THUMB POSITION" HorizontalAlignment="Right" Grid.Row="0" Text="{Binding Path=Value, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
The full style is shown here:
<Style x:Key="MyCustomStyleForSlider" TargetType="{x:Type Slider}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto" MinWidth="{TemplateBinding MinWidth}"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="{Binding Path=Value, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Path=Minimum, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
<TextBlock Grid.Column="2" Grid.Row="1" Text="{Binding Path=Maximum, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
<TickBar Grid.Column="1" x:Name="TopTick" Visibility="Visible" Fill="LightGray" Placement="Top" Height="6" Grid.Row="1"/>
<TickBar Grid.Column="1" x:Name="BottomTick" Visibility="Collapsed" Fill="Green" Placement="Bottom" Height="4" Grid.Row="0"/>
<Border x:Name="TrackBackground" BorderThickness="1" CornerRadius="1" Margin="5,0" VerticalAlignment="Center" Height="4.0" Grid.Row="1" >
<Canvas Margin="-6,-1">
<Rectangle Visibility="Visible" x:Name="PART_SelectionRange" Height="4.0" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Stroke="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" StrokeThickness="1.0"/>
</Canvas>
</Border>
<Track x:Name="PART_Track" Grid.Row="1" Grid.Column="1">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButtonStyle}" BorderBrush="Transparent" Background="Transparent" Foreground="Transparent" Command="{x:Static Slider.DecreaseLarge}"/>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButtonStyle}" Background="Transparent" Foreground="Transparent" BorderBrush="Transparent" Command="{x:Static Slider.IncreaseLarge}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<!--<Thumb x:Name="Thumb" Background="Black"/>-->
<Thumb x:Name="Thumb" Style="{StaticResource CustomThumbForSlider}" Background="Black"/>
</Track.Thumb>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I found the solution now. I use the ActualWidth of the decrease RepeatButton to get the position of the thumb. I only need a converter because of some offset but it works without any code behind.
Code:
<TextBlock Grid.Column="1" Grid.Row="0" TextAlignment="Right" Foreground="#3B3833"
HorizontalAlignment="Left" Width="{Binding Path=ActualWidth, ElementName=leftToggle,
Converter={StaticResource SliderConverter}, ConverterParameter=140}" Text="{Binding
Path=Value, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>
Preview:

Categories