In this code I added an image before the button text I'd like to have a space between the image and text but the code I have isn't working.
<Button Height="25"
Width="80"
Margin="5,10,5,10"
Command="{Binding PreviewTemplateCommand}">
<StackPanel Orientation="Horizontal" Height="15" Width="63">
<Image Source="/UILibrary;component/Themes/Default/Images/preview.PNG"
Height="15" Width="15" Margin="0,0,0,0" />
<TextBlock >Preview</TextBlock>
</StackPanel>
</Button>
Hi you have to set the left margin of the textblock. Try this:
<StackPanel Orientation="Horizontal" Height="15" Width="63">
<Image Source="..." Height="15" Width="15" Margin="0,0,0,0" />
<TextBlock Margin="25,0,0,0">Preview</TextBlock>
</StackPanel>
Related
I use LibVLCSharp.WPF in a WPF application.
I want to put some icons and buttons above the video.
But after the VideoView control has loaded, it overwrite everything.
<Canvas Width="325" Height="182">
<Image Source="/Resource/BgLoading_1.png"
Width="325"
Height="182"
Stretch="Fill"
StretchDirection="Both"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Panel.ZIndex="0"
Visibility="Visible" />
<fa:ImageAwesome Foreground="White"
Icon="Spinner"
Spin="True"
Height="48"
Width="48"
Visibility="{Binding LoadImageStatus}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Canvas.Left="139"
Canvas.Top="67" />
<Image x:Name="imgLeftIcon"
Width="30"
Height="30"
Source="{Binding LeftIconSource}"
Stretch="Fill"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,10,10"
Visibility="{Binding LeftIconStatus}"
Panel.ZIndex="2" />
<Image x:Name="imgRightIcon"
Width="30"
Height="30"
Source="{Binding RightIconSource}"
Stretch="Fill"
Margin="285,10,10,142"
Visibility="{Binding RightIconStatus}"
Panel.ZIndex="2" />
<!--Video-->
<vlc:VideoView Grid.Row="0"
Height="182"
Width="325"
Visibility="{Binding VideoPlayerStatus}"
Panel.ZIndex="1" />
</Canvas>
RTFM
The controls that must appear on top of the video should be placed as children of the VideoView element.
<Window ...
xmlns:vlc="clr-namespace:LibVLCSharp.WPF;assembly=LibVLCSharp.WPF"
...>
<Grid>
<vlc:VideoView x:Name="VideoView">
<Button x:Name="PlayButton"
Click="PlayButtonOnClick"
Content="Play"
Margin="8"
HorizontalAlignment="Right"
VerticalAlignment="Bottom" />
</vlc:VideoView>
</Grid>
</Window>
Avoid Canvas since they are pretty dumb.
Working example sources based on the manual.
I haven't used vlc, if it covers the icons, I think it should be a window drawn with a separate handle. just like WindowsFormHost. try use Popup control, it can be displayed on top of any control.
<Grid>
<!--video control-->
<Grid Name="video">
<!--Video-->
<vlc:VideoView Grid.Row="0"
Height="182"
Width="325"
Visibility="{Binding VideoPlayerStatus}"
Panel.ZIndex="1" />
</Grid>
<Popup PlacementTarget="{Binding ElementName=video}" Placement="Center">
<Grid>
<Image x:Name="imgLeftIcon"
Width="30"
Height="30"
Source="{Binding LeftIconSource}"
Stretch="Fill"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,10,10"
Visibility="{Binding LeftIconStatus}"
Panel.ZIndex="2" />
</Grid>
</Popup>
</Grid>
I have a toolbar in my WPF window as shown in bellow, please help me change labels foreground color dynamically in code behind.
Thanks...
<DockPanel Height="60" VerticalAlignment="Top">
<ToolBar Name="MyToolBar" DockPanel.Dock="Top" Height="60" VerticalAlignment="Top" FlowDirection="RightToLeft"
FontFamily="Calibri" FontSize="16" FontWeight="Bold" Background="#FFEEF5FD" Foreground="Black" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<Button Name="BtnSubmit" Style="{DynamicResource TStyle}" Click="BtnSubmit_Click" Tag="New" Height="52" Width="60"
IsDefault="True" Margin="0,0,0,1">
<StackPanel Margin="0" Height="54"
<Image Source="/Img/Save 04.png" Height="25" Margin="16,0"/>
<Label Content="Save" Margin="0,0,0,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</Button>
<Button Name="BtnApply" Style="{DynamicResource TStyle}" Click="BtnApply_Click" Tag="New" Height="52"
IsDefault="True" Margin="0,1,0,2" Width="85">
<StackPanel Margin="0" Height="52" Width="82">
<Image Source="/Img/ApplyIcon.png" Height="25" Margin="29,0,26,0"/>
<Label Content="Edit" Margin="-15,0,-23,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</Button>
</ToolBar>
</DockPanel>
To change the Foreground of all TextBlock elements you must define a Brush resource and assign it to all relevant TextBlock elements using {DynamicResource}:
MainWindow.xaml
<Window>
<Window.Resources>
<SolidColorBrush x:Key="ButtonLabelForegroundBrush" Color="Black" />
</Window.Resources>
<DockPanel>
<ToolBar>
<Button>
<TextBlock Foreground="{DynamicResource ButtonLabelForegroundBrush}" />
</Button>
</ToolBar>
</DockPanel>
</Window>
MainWindow.xaml.cs
private void ChangeTextBlockForeground()
{
var brush = FindResource("ButtonLabelForegroundBrush") as SolidColorBrush;
brush.Color = Colors.Red;
}
I have two stackpanel inside Dock Panel. When the window is resizing the top panel is overlapping the bottom one.
<Grid>
<DockPanel DockPanel.Dock="Left" LastChildFill="True" Width="{Binding ActualWidth, ElementName=characterLength}">
<!-- Batch information panel: Top -->
<ScrollViewer DockPanel.Dock="Top" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Margin="6,0,0,0">
<StackPanel Orientation="Vertical" Margin="6,0,0,6" >
<TextBlock x:Name="ReadOnlyNoBatchesTextBlock"
DockPanel.Dock="Top"
Text="no batch"
FontSize="19" HorizontalAlignment="left" AutomationProperties.AutomationId="DipIn_BatchReviewView_NoBatches_Text"
FontWeight="Bold"
/>
<TextBlock HorizontalAlignment="Left" FontSize="19" FontWeight="Bold" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchNumber_Text" />
<TextBlock Text="status" HorizontalAlignment="Left" Margin="0,6,0,0" FontSize="16" FontWeight="Bold"
AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchSubmissionStatus_Text">
</TextBlock>
<TextBlock Text="submitted" FontSize="14" HorizontalAlignment="Left"
AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchSubmittedAt_Text">
</TextBlock>
<TextBlock Text="qeqweq" FontSize="14" HorizontalAlignment="Left" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchSubmittedBy_Text" />
<TextBlock Text="ertert" FontSize="16" HorizontalAlignment="Left" Margin="0,6,0,0" FontWeight="Bold" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchProgressed_Text">
</TextBlock>
<TextBlock Text="dsdfgfdg" FontSize="14" HorizontalAlignment="Left" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchProgressedAt_Text" >
</TextBlock>
<!-- Must be last item in the stack panel otherwise you get a vertical gap-->
<TextBlock Grid.Column="0" x:Name="characterLength" Text="abcdefg" HorizontalAlignment="Left" Visibility="Hidden" FontWeight="Bold" FontSize="14" />
</StackPanel>
</ScrollViewer>
<!-- Button panel: Bottom -->
<StackPanel Orientation="Vertical" VerticalAlignment="Bottom">
<!-- Content is set by a Style Trigger -->
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_SetMarkerStandardised_Button" />
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,3,0,3"
AutomationProperties.AutomationId="DipIn_BatchReviewView_AllocateNextStandardisationBatch_Button" />
<!-- Content, Automation Id & Command is set by a Style Trigger -->
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3" />
<!-- Content is set by a Style Trigger -->
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,3,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_AutoProgressBatches_Button" />
<!-- Content is set by a Style Trigger -->
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchListFilter_Button" />
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_SubmitBatch_Button" />
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,3,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_StartStop_Marker_Button">
<TextBlock FontSize="14" Text="a" />
</Button>
</StackPanel>
</DockPanel>
</Grid>
I need that when window is resizing bottom panel should always be visible and top panel will get scroll bar.
I have tried many ways but still getting the same issue from this code the top one will get the scroll bar but only when the bottom one will go invisible
<Grid>
<DockPanel>
<!--<ScrollViewer DockPanel.Dock="Top" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Margin="6,0,0,0">-->
<StackPanel Orientation="Vertical" Margin="6,0,0,6" >
<TextBlock x:Name="ReadOnlyNoBatchesTextBlock"
DockPanel.Dock="Top"
Text="no batch"
FontSize="19" HorizontalAlignment="left" AutomationProperties.AutomationId="DipIn_BatchReviewView_NoBatches_Text"
FontWeight="Bold"
/>
<TextBlock HorizontalAlignment="Left" FontSize="19" FontWeight="Bold" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchNumber_Text" />
<TextBlock Text="status" HorizontalAlignment="Left" Margin="0,6,0,0" FontSize="16" FontWeight="Bold"
AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchSubmissionStatus_Text">
</TextBlock>
<TextBlock Text="submitted" FontSize="14" HorizontalAlignment="Left"
AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchSubmittedAt_Text">
</TextBlock>
<TextBlock Text="qeqweq" FontSize="14" HorizontalAlignment="Left" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchSubmittedBy_Text" />
<TextBlock Text="ertert" FontSize="16" HorizontalAlignment="Left" Margin="0,6,0,0" FontWeight="Bold" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchProgressed_Text">
</TextBlock>
<TextBlock Text="dsdfgfdg" FontSize="14" HorizontalAlignment="Left" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchProgressedAt_Text" >
</TextBlock>
<!-- Must be last item in the stack panel otherwise you get a vertical gap-->
<TextBlock Grid.Column="0" x:Name="characterLength" Text="abcdefg" HorizontalAlignment="Left" Visibility="Hidden" FontWeight="Bold" FontSize="14" />
</StackPanel>
<!--</ScrollViewer>-->
<!-- Button panel: Bottom -->
<StackPanel Orientation="Vertical" VerticalAlignment="Bottom">
<!-- Content is set by a Style Trigger -->
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_SetMarkerStandardised_Button" />
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,3,0,3"
AutomationProperties.AutomationId="DipIn_BatchReviewView_AllocateNextStandardisationBatch_Button" />
<!-- Content, Automation Id & Command is set by a Style Trigger -->
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3" />
<!-- Content is set by a Style Trigger -->
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,3,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_AutoProgressBatches_Button" />
<!-- Content is set by a Style Trigger -->
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_BatchListFilter_Button" />
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,0,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_SubmitBatch_Button" />
<Button Height="40" HorizontalAlignment="Stretch" Margin="0,3,0,3" AutomationProperties.AutomationId="DipIn_BatchReviewView_StartStop_Marker_Button">
<TextBlock FontSize="14" Text="a" />
</Button>
</StackPanel>
</DockPanel>
</Grid>
Avoid using ScrollViewer it will Avoid the Overlapping of the Content .
You could use a Grid with two RowDefinitions:
<DockPanel DockPanel.Dock="Left" LastChildFill="True" Width="{Binding ActualWidth, ElementName=characterLength}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Margin="6,0,0,0">
<StackPanel Orientation="Vertical" Margin="6,0,0,6" >
...
</StackPanel>
</ScrollViewer>
<StackPanel Grid.Row="1" Orientation="Vertical" VerticalAlignment="Bottom">
...
</StackPanel>
</Grid>
</DockPanel>
I have vertical navigation bar. Each button of the navigation has it's own image and text. For now the image has static height set to Height="50"and text has the default value. When I resize the window the buttons grow responsive but the content inside keeps the same size.
This is how it look right now:
https://gyazo.com/48cff48437b66f462dccd23639dd59ac (GIF)
My XAML code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<UniformGrid Background="DodgerBlue" Grid.Column="1" Columns="1">
<Button BorderThickness="0" Background="DodgerBlue">
<StackPanel>
<Image Source="Icons/home-5-xxl.png" Height="50" Margin="0,0,0,10"/>
<TextBlock HorizontalAlignment="Center" Foreground="White" FontWeight="Bold">Home</TextBlock>
</StackPanel>
</Button>
<Button BorderThickness="0" Background="DodgerBlue">
<StackPanel>
<Image Source="Icons/search-3-xxl.png" Height="50" Margin="0,0,0,10"/>
<TextBlock HorizontalAlignment="Center" Foreground="White" FontWeight="Bold">Search</TextBlock>
</StackPanel>
</Button>
<Button BorderThickness="0" Background="DodgerBlue">
<StackPanel>
<Image Source="Icons/twitter-xxl.png" Height="50" Margin="0,0,0,10"/>
<TextBlock HorizontalAlignment="Center" Foreground="White" FontWeight="Bold">Twitter</TextBlock>
</StackPanel>
</Button>
<Button BorderThickness="0" Background="DodgerBlue">
<StackPanel>
<Image Source="Icons/chat-4-xxl.png" Height="50" Margin="0,0,0,10"/>
<TextBlock HorizontalAlignment="Center" Foreground="White" FontWeight="Bold">Chat</TextBlock>
</StackPanel>
</Button>
</UniformGrid>
</Grid>
How could i make content inside the Buttons responsive and grow when the button grows in XAML WPF?
Use Viewbox as shown here.
<Viewbox Stretch="Uniform">
<Button ... />
</Viewbox>
I am trying to add icon inside small Button but it doesn't enters as desired,
here my xaml:
<Button x:Name="eye_button" BorderBrush="{x:Null}" Margin="234,0,0,0" Height="15" Width="15">
<materialDesign:PackIcon Kind="Eye" Foreground="Black" />
</Button>
Here how it's looks like:
The left squre it's the button, in the right it's the icon
Try this:
<Button x:Name="eye_button" BorderBrush="{x:Null}" Margin="234,0,0,0" HorizontalAlignment="Left">
<materialDesign:PackIcon Kind="Eye" Foreground="Black" Width="15" Height="15" />
</Button>
It should look like this at runtime:
<Button
Width="15"
Height="15"
Padding="0"
HorizontalAlignment="Center"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Background="Transparent"
BorderThickness="0"
Foreground="Red">
<materialDesign:PackIcon
Width="15"
Height="15"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="Black"
Kind="ArrowBack" />
</Button>
Make sure you put padding to 0